@john-guerra/fisheye-nav 0.1.0

package/dist/fisheye-nav.esm.js

@@ -0,0 +1,4477 @@
+// @john-guerra/fisheye-nav v0.1.0 Copyright (c) 2026 John Alexis Guerra Gómez
+// reactive-widget-helper v0.0.2 Copyright (c) 2024 John Alexis Guerra Gómez
+function ReactiveWidget(
+  target,
+  { showValue = () => {}, value } = {}
+) {
+  // 🧰 The interval value selected by the user interaction
+  let intervalValue = value;
+
+  // 🧰 And a function to update the current internal value. This one triggers the input event
+  function setValue(newValue) {
+    intervalValue = newValue;
+    target.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+  }
+
+  // 🧰 The value attribute setter and getter
+  Object.defineProperty(target, "value", {
+    get() {
+      return intervalValue;
+    },
+    set(newValue) {
+      intervalValue = newValue;
+      showValue();
+    },
+  });
+
+  // 🧰 Listen to the input event, and reflec the current value
+  target.addEventListener("input", (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    showValue(evt);
+  });
+
+  // Expose the setValue
+  target.setValue = setValue;
+
+  // 🧰 Finally return the html element
+  return target;
+}
+
+var xhtml = "http://www.w3.org/1999/xhtml";
+
+var namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: xhtml,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
+
+function namespace(name) {
+  var prefix = name += "", i = prefix.indexOf(":");
+  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+  return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
+}
+
+function creatorInherit(name) {
+  return function() {
+    var document = this.ownerDocument,
+        uri = this.namespaceURI;
+    return uri === xhtml && document.documentElement.namespaceURI === xhtml
+        ? document.createElement(name)
+        : document.createElementNS(uri, name);
+  };
+}
+
+function creatorFixed(fullname) {
+  return function() {
+    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+  };
+}
+
+function creator(name) {
+  var fullname = namespace(name);
+  return (fullname.local
+      ? creatorFixed
+      : creatorInherit)(fullname);
+}
+
+function none() {}
+
+function selector(selector) {
+  return selector == null ? none : function() {
+    return this.querySelector(selector);
+  };
+}
+
+function selection_select(select) {
+  if (typeof select !== "function") select = selector(select);
+
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+        if ("__data__" in node) subnode.__data__ = node.__data__;
+        subgroup[i] = subnode;
+      }
+    }
+  }
+
+  return new Selection(subgroups, this._parents);
+}
+
+// Given something array like (or null), returns something that is strictly an
+// array. This is used to ensure that array-like objects passed to d3.selectAll
+// or selection.selectAll are converted into proper arrays when creating a
+// selection; we don’t ever want to create a selection backed by a live
+// HTMLCollection or NodeList. However, note that selection.selectAll will use a
+// static NodeList as a group, since it safely derived from querySelectorAll.
+function array(x) {
+  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
+}
+
+function empty() {
+  return [];
+}
+
+function selectorAll(selector) {
+  return selector == null ? empty : function() {
+    return this.querySelectorAll(selector);
+  };
+}
+
+function arrayAll(select) {
+  return function() {
+    return array(select.apply(this, arguments));
+  };
+}
+
+function selection_selectAll(select) {
+  if (typeof select === "function") select = arrayAll(select);
+  else select = selectorAll(select);
+
+  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        subgroups.push(select.call(node, node.__data__, i, group));
+        parents.push(node);
+      }
+    }
+  }
+
+  return new Selection(subgroups, parents);
+}
+
+function matcher(selector) {
+  return function() {
+    return this.matches(selector);
+  };
+}
+
+function childMatcher(selector) {
+  return function(node) {
+    return node.matches(selector);
+  };
+}
+
+var find = Array.prototype.find;
+
+function childFind(match) {
+  return function() {
+    return find.call(this.children, match);
+  };
+}
+
+function childFirst() {
+  return this.firstElementChild;
+}
+
+function selection_selectChild(match) {
+  return this.select(match == null ? childFirst
+      : childFind(typeof match === "function" ? match : childMatcher(match)));
+}
+
+var filter = Array.prototype.filter;
+
+function children() {
+  return Array.from(this.children);
+}
+
+function childrenFilter(match) {
+  return function() {
+    return filter.call(this.children, match);
+  };
+}
+
+function selection_selectChildren(match) {
+  return this.selectAll(match == null ? children
+      : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
+}
+
+function selection_filter(match) {
+  if (typeof match !== "function") match = matcher(match);
+
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+        subgroup.push(node);
+      }
+    }
+  }
+
+  return new Selection(subgroups, this._parents);
+}
+
+function sparse(update) {
+  return new Array(update.length);
+}
+
+function selection_enter() {
+  return new Selection(this._enter || this._groups.map(sparse), this._parents);
+}
+
+function EnterNode(parent, datum) {
+  this.ownerDocument = parent.ownerDocument;
+  this.namespaceURI = parent.namespaceURI;
+  this._next = null;
+  this._parent = parent;
+  this.__data__ = datum;
+}
+
+EnterNode.prototype = {
+  constructor: EnterNode,
+  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+  querySelector: function(selector) { return this._parent.querySelector(selector); },
+  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+};
+
+function constant$1(x) {
+  return function() {
+    return x;
+  };
+}
+
+function bindIndex(parent, group, enter, update, exit, data) {
+  var i = 0,
+      node,
+      groupLength = group.length,
+      dataLength = data.length;
+
+  // Put any non-null nodes that fit into update.
+  // Put any null nodes into enter.
+  // Put any remaining data into enter.
+  for (; i < dataLength; ++i) {
+    if (node = group[i]) {
+      node.__data__ = data[i];
+      update[i] = node;
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
+
+  // Put any non-null nodes that don’t fit into exit.
+  for (; i < groupLength; ++i) {
+    if (node = group[i]) {
+      exit[i] = node;
+    }
+  }
+}
+
+function bindKey(parent, group, enter, update, exit, data, key) {
+  var i,
+      node,
+      nodeByKeyValue = new Map,
+      groupLength = group.length,
+      dataLength = data.length,
+      keyValues = new Array(groupLength),
+      keyValue;
+
+  // Compute the key for each node.
+  // If multiple nodes have the same key, the duplicates are added to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if (node = group[i]) {
+      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
+      if (nodeByKeyValue.has(keyValue)) {
+        exit[i] = node;
+      } else {
+        nodeByKeyValue.set(keyValue, node);
+      }
+    }
+  }
+
+  // Compute the key for each datum.
+  // If there a node associated with this key, join and add it to update.
+  // If there is not (or the key is a duplicate), add it to enter.
+  for (i = 0; i < dataLength; ++i) {
+    keyValue = key.call(parent, data[i], i, data) + "";
+    if (node = nodeByKeyValue.get(keyValue)) {
+      update[i] = node;
+      node.__data__ = data[i];
+      nodeByKeyValue.delete(keyValue);
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
+
+  // Add any remaining nodes that were not bound to data to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
+      exit[i] = node;
+    }
+  }
+}
+
+function datum(node) {
+  return node.__data__;
+}
+
+function selection_data(value, key) {
+  if (!arguments.length) return Array.from(this, datum);
+
+  var bind = key ? bindKey : bindIndex,
+      parents = this._parents,
+      groups = this._groups;
+
+  if (typeof value !== "function") value = constant$1(value);
+
+  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+    var parent = parents[j],
+        group = groups[j],
+        groupLength = group.length,
+        data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),
+        dataLength = data.length,
+        enterGroup = enter[j] = new Array(dataLength),
+        updateGroup = update[j] = new Array(dataLength),
+        exitGroup = exit[j] = new Array(groupLength);
+
+    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+
+    // Now connect the enter nodes to their following update node, such that
+    // appendChild can insert the materialized enter node before this node,
+    // rather than at the end of the parent node.
+    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+      if (previous = enterGroup[i0]) {
+        if (i0 >= i1) i1 = i0 + 1;
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+        previous._next = next || null;
+      }
+    }
+  }
+
+  update = new Selection(update, parents);
+  update._enter = enter;
+  update._exit = exit;
+  return update;
+}
+
+// Given some data, this returns an array-like view of it: an object that
+// exposes a length property and allows numeric indexing. Note that unlike
+// selectAll, this isn’t worried about “live” collections because the resulting
+// array will only be used briefly while data is being bound. (It is possible to
+// cause the data to change while iterating by using a key function, but please
+// don’t; we’d rather avoid a gratuitous copy.)
+function arraylike(data) {
+  return typeof data === "object" && "length" in data
+    ? data // Array, TypedArray, NodeList, array-like
+    : Array.from(data); // Map, Set, iterable, string, or anything else
+}
+
+function selection_exit() {
+  return new Selection(this._exit || this._groups.map(sparse), this._parents);
+}
+
+function selection_join(onenter, onupdate, onexit) {
+  var enter = this.enter(), update = this, exit = this.exit();
+  if (typeof onenter === "function") {
+    enter = onenter(enter);
+    if (enter) enter = enter.selection();
+  } else {
+    enter = enter.append(onenter + "");
+  }
+  if (onupdate != null) {
+    update = onupdate(update);
+    if (update) update = update.selection();
+  }
+  if (onexit == null) exit.remove(); else onexit(exit);
+  return enter && update ? enter.merge(update).order() : update;
+}
+
+function selection_merge(context) {
+  var selection = context.selection ? context.selection() : context;
+
+  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group0[i] || group1[i]) {
+        merge[i] = node;
+      }
+    }
+  }
+
+  for (; j < m0; ++j) {
+    merges[j] = groups0[j];
+  }
+
+  return new Selection(merges, this._parents);
+}
+
+function selection_order() {
+
+  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+      if (node = group[i]) {
+        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+        next = node;
+      }
+    }
+  }
+
+  return this;
+}
+
+function selection_sort(compare) {
+  if (!compare) compare = ascending$1;
+
+  function compareNode(a, b) {
+    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+  }
+
+  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        sortgroup[i] = node;
+      }
+    }
+    sortgroup.sort(compareNode);
+  }
+
+  return new Selection(sortgroups, this._parents).order();
+}
+
+function ascending$1(a, b) {
+  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+}
+
+function selection_call() {
+  var callback = arguments[0];
+  arguments[0] = this;
+  callback.apply(null, arguments);
+  return this;
+}
+
+function selection_nodes() {
+  return Array.from(this);
+}
+
+function selection_node() {
+
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+      var node = group[i];
+      if (node) return node;
+    }
+  }
+
+  return null;
+}
+
+function selection_size() {
+  let size = 0;
+  for (const node of this) ++size; // eslint-disable-line no-unused-vars
+  return size;
+}
+
+function selection_empty() {
+  return !this.node();
+}
+
+function selection_each(callback) {
+
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) callback.call(node, node.__data__, i, group);
+    }
+  }
+
+  return this;
+}
+
+function attrRemove(name) {
+  return function() {
+    this.removeAttribute(name);
+  };
+}
+
+function attrRemoveNS(fullname) {
+  return function() {
+    this.removeAttributeNS(fullname.space, fullname.local);
+  };
+}
+
+function attrConstant(name, value) {
+  return function() {
+    this.setAttribute(name, value);
+  };
+}
+
+function attrConstantNS(fullname, value) {
+  return function() {
+    this.setAttributeNS(fullname.space, fullname.local, value);
+  };
+}
+
+function attrFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
+  };
+}
+
+function attrFunctionNS(fullname, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+    else this.setAttributeNS(fullname.space, fullname.local, v);
+  };
+}
+
+function selection_attr(name, value) {
+  var fullname = namespace(name);
+
+  if (arguments.length < 2) {
+    var node = this.node();
+    return fullname.local
+        ? node.getAttributeNS(fullname.space, fullname.local)
+        : node.getAttribute(fullname);
+  }
+
+  return this.each((value == null
+      ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
+      ? (fullname.local ? attrFunctionNS : attrFunction)
+      : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
+}
+
+function defaultView(node) {
+  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+      || (node.document && node) // node is a Window
+      || node.defaultView; // node is a Document
+}
+
+function styleRemove(name) {
+  return function() {
+    this.style.removeProperty(name);
+  };
+}
+
+function styleConstant(name, value, priority) {
+  return function() {
+    this.style.setProperty(name, value, priority);
+  };
+}
+
+function styleFunction(name, value, priority) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.style.removeProperty(name);
+    else this.style.setProperty(name, v, priority);
+  };
+}
+
+function selection_style(name, value, priority) {
+  return arguments.length > 1
+      ? this.each((value == null
+            ? styleRemove : typeof value === "function"
+            ? styleFunction
+            : styleConstant)(name, value, priority == null ? "" : priority))
+      : styleValue(this.node(), name);
+}
+
+function styleValue(node, name) {
+  return node.style.getPropertyValue(name)
+      || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+}
+
+function propertyRemove(name) {
+  return function() {
+    delete this[name];
+  };
+}
+
+function propertyConstant(name, value) {
+  return function() {
+    this[name] = value;
+  };
+}
+
+function propertyFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) delete this[name];
+    else this[name] = v;
+  };
+}
+
+function selection_property(name, value) {
+  return arguments.length > 1
+      ? this.each((value == null
+          ? propertyRemove : typeof value === "function"
+          ? propertyFunction
+          : propertyConstant)(name, value))
+      : this.node()[name];
+}
+
+function classArray(string) {
+  return string.trim().split(/^|\s+/);
+}
+
+function classList(node) {
+  return node.classList || new ClassList(node);
+}
+
+function ClassList(node) {
+  this._node = node;
+  this._names = classArray(node.getAttribute("class") || "");
+}
+
+ClassList.prototype = {
+  add: function(name) {
+    var i = this._names.indexOf(name);
+    if (i < 0) {
+      this._names.push(name);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
+  },
+  remove: function(name) {
+    var i = this._names.indexOf(name);
+    if (i >= 0) {
+      this._names.splice(i, 1);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
+  },
+  contains: function(name) {
+    return this._names.indexOf(name) >= 0;
+  }
+};
+
+function classedAdd(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.add(names[i]);
+}
+
+function classedRemove(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.remove(names[i]);
+}
+
+function classedTrue(names) {
+  return function() {
+    classedAdd(this, names);
+  };
+}
+
+function classedFalse(names) {
+  return function() {
+    classedRemove(this, names);
+  };
+}
+
+function classedFunction(names, value) {
+  return function() {
+    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+  };
+}
+
+function selection_classed(name, value) {
+  var names = classArray(name + "");
+
+  if (arguments.length < 2) {
+    var list = classList(this.node()), i = -1, n = names.length;
+    while (++i < n) if (!list.contains(names[i])) return false;
+    return true;
+  }
+
+  return this.each((typeof value === "function"
+      ? classedFunction : value
+      ? classedTrue
+      : classedFalse)(names, value));
+}
+
+function textRemove() {
+  this.textContent = "";
+}
+
+function textConstant(value) {
+  return function() {
+    this.textContent = value;
+  };
+}
+
+function textFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.textContent = v == null ? "" : v;
+  };
+}
+
+function selection_text(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? textRemove : (typeof value === "function"
+          ? textFunction
+          : textConstant)(value))
+      : this.node().textContent;
+}
+
+function htmlRemove() {
+  this.innerHTML = "";
+}
+
+function htmlConstant(value) {
+  return function() {
+    this.innerHTML = value;
+  };
+}
+
+function htmlFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.innerHTML = v == null ? "" : v;
+  };
+}
+
+function selection_html(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? htmlRemove : (typeof value === "function"
+          ? htmlFunction
+          : htmlConstant)(value))
+      : this.node().innerHTML;
+}
+
+function raise() {
+  if (this.nextSibling) this.parentNode.appendChild(this);
+}
+
+function selection_raise() {
+  return this.each(raise);
+}
+
+function lower() {
+  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
+
+function selection_lower() {
+  return this.each(lower);
+}
+
+function selection_append(name) {
+  var create = typeof name === "function" ? name : creator(name);
+  return this.select(function() {
+    return this.appendChild(create.apply(this, arguments));
+  });
+}
+
+function constantNull() {
+  return null;
+}
+
+function selection_insert(name, before) {
+  var create = typeof name === "function" ? name : creator(name),
+      select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+  return this.select(function() {
+    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+  });
+}
+
+function remove() {
+  var parent = this.parentNode;
+  if (parent) parent.removeChild(this);
+}
+
+function selection_remove() {
+  return this.each(remove);
+}
+
+function selection_cloneShallow() {
+  var clone = this.cloneNode(false), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
+
+function selection_cloneDeep() {
+  var clone = this.cloneNode(true), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
+
+function selection_clone(deep) {
+  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+}
+
+function selection_datum(value) {
+  return arguments.length
+      ? this.property("__data__", value)
+      : this.node().__data__;
+}
+
+function contextListener(listener) {
+  return function(event) {
+    listener.call(this, event, this.__data__);
+  };
+}
+
+function parseTypenames(typenames) {
+  return typenames.trim().split(/^|\s+/).map(function(t) {
+    var name = "", i = t.indexOf(".");
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    return {type: t, name: name};
+  });
+}
+
+function onRemove(typename) {
+  return function() {
+    var on = this.__on;
+    if (!on) return;
+    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+      } else {
+        on[++i] = o;
+      }
+    }
+    if (++i) on.length = i;
+    else delete this.__on;
+  };
+}
+
+function onAdd(typename, value, options) {
+  return function() {
+    var on = this.__on, o, listener = contextListener(value);
+    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+        this.addEventListener(o.type, o.listener = listener, o.options = options);
+        o.value = value;
+        return;
+      }
+    }
+    this.addEventListener(typename.type, listener, options);
+    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
+    if (!on) this.__on = [o];
+    else on.push(o);
+  };
+}
+
+function selection_on(typename, value, options) {
+  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+
+  if (arguments.length < 2) {
+    var on = this.node().__on;
+    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+      for (i = 0, o = on[j]; i < n; ++i) {
+        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+          return o.value;
+        }
+      }
+    }
+    return;
+  }
+
+  on = value ? onAdd : onRemove;
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
+  return this;
+}
+
+function dispatchEvent(node, type, params) {
+  var window = defaultView(node),
+      event = window.CustomEvent;
+
+  if (typeof event === "function") {
+    event = new event(type, params);
+  } else {
+    event = window.document.createEvent("Event");
+    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+    else event.initEvent(type, false, false);
+  }
+
+  node.dispatchEvent(event);
+}
+
+function dispatchConstant(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params);
+  };
+}
+
+function dispatchFunction(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params.apply(this, arguments));
+  };
+}
+
+function selection_dispatch(type, params) {
+  return this.each((typeof params === "function"
+      ? dispatchFunction
+      : dispatchConstant)(type, params));
+}
+
+function* selection_iterator() {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) yield node;
+    }
+  }
+}
+
+var root = [null];
+
+function Selection(groups, parents) {
+  this._groups = groups;
+  this._parents = parents;
+}
+
+function selection_selection() {
+  return this;
+}
+
+Selection.prototype = {
+  constructor: Selection,
+  select: selection_select,
+  selectAll: selection_selectAll,
+  selectChild: selection_selectChild,
+  selectChildren: selection_selectChildren,
+  filter: selection_filter,
+  data: selection_data,
+  enter: selection_enter,
+  exit: selection_exit,
+  join: selection_join,
+  merge: selection_merge,
+  selection: selection_selection,
+  order: selection_order,
+  sort: selection_sort,
+  call: selection_call,
+  nodes: selection_nodes,
+  node: selection_node,
+  size: selection_size,
+  empty: selection_empty,
+  each: selection_each,
+  attr: selection_attr,
+  style: selection_style,
+  property: selection_property,
+  classed: selection_classed,
+  text: selection_text,
+  html: selection_html,
+  raise: selection_raise,
+  lower: selection_lower,
+  append: selection_append,
+  insert: selection_insert,
+  remove: selection_remove,
+  clone: selection_clone,
+  datum: selection_datum,
+  on: selection_on,
+  dispatch: selection_dispatch,
+  [Symbol.iterator]: selection_iterator
+};
+
+function select(selector) {
+  return typeof selector === "string"
+      ? new Selection([[document.querySelector(selector)]], [document.documentElement])
+      : new Selection([[selector]], root);
+}
+
+function sourceEvent(event) {
+  let sourceEvent;
+  while (sourceEvent = event.sourceEvent) event = sourceEvent;
+  return event;
+}
+
+function pointer(event, node) {
+  event = sourceEvent(event);
+  if (node === undefined) node = event.currentTarget;
+  if (node) {
+    var svg = node.ownerSVGElement || node;
+    if (svg.createSVGPoint) {
+      var point = svg.createSVGPoint();
+      point.x = event.clientX, point.y = event.clientY;
+      point = point.matrixTransform(node.getScreenCTM().inverse());
+      return [point.x, point.y];
+    }
+    if (node.getBoundingClientRect) {
+      var rect = node.getBoundingClientRect();
+      return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+    }
+  }
+  return [event.pageX, event.pageY];
+}
+
+function count(node) {
+  var sum = 0,
+      children = node.children,
+      i = children && children.length;
+  if (!i) sum = 1;
+  else while (--i >= 0) sum += children[i].value;
+  node.value = sum;
+}
+
+function node_count() {
+  return this.eachAfter(count);
+}
+
+function node_each(callback, that) {
+  let index = -1;
+  for (const node of this) {
+    callback.call(that, node, ++index, this);
+  }
+  return this;
+}
+
+function node_eachBefore(callback, that) {
+  var node = this, nodes = [node], children, i, index = -1;
+  while (node = nodes.pop()) {
+    callback.call(that, node, ++index, this);
+    if (children = node.children) {
+      for (i = children.length - 1; i >= 0; --i) {
+        nodes.push(children[i]);
+      }
+    }
+  }
+  return this;
+}
+
+function node_eachAfter(callback, that) {
+  var node = this, nodes = [node], next = [], children, i, n, index = -1;
+  while (node = nodes.pop()) {
+    next.push(node);
+    if (children = node.children) {
+      for (i = 0, n = children.length; i < n; ++i) {
+        nodes.push(children[i]);
+      }
+    }
+  }
+  while (node = next.pop()) {
+    callback.call(that, node, ++index, this);
+  }
+  return this;
+}
+
+function node_find(callback, that) {
+  let index = -1;
+  for (const node of this) {
+    if (callback.call(that, node, ++index, this)) {
+      return node;
+    }
+  }
+}
+
+function node_sum(value) {
+  return this.eachAfter(function(node) {
+    var sum = +value(node.data) || 0,
+        children = node.children,
+        i = children && children.length;
+    while (--i >= 0) sum += children[i].value;
+    node.value = sum;
+  });
+}
+
+function node_sort(compare) {
+  return this.eachBefore(function(node) {
+    if (node.children) {
+      node.children.sort(compare);
+    }
+  });
+}
+
+function node_path(end) {
+  var start = this,
+      ancestor = leastCommonAncestor(start, end),
+      nodes = [start];
+  while (start !== ancestor) {
+    start = start.parent;
+    nodes.push(start);
+  }
+  var k = nodes.length;
+  while (end !== ancestor) {
+    nodes.splice(k, 0, end);
+    end = end.parent;
+  }
+  return nodes;
+}
+
+function leastCommonAncestor(a, b) {
+  if (a === b) return a;
+  var aNodes = a.ancestors(),
+      bNodes = b.ancestors(),
+      c = null;
+  a = aNodes.pop();
+  b = bNodes.pop();
+  while (a === b) {
+    c = a;
+    a = aNodes.pop();
+    b = bNodes.pop();
+  }
+  return c;
+}
+
+function node_ancestors() {
+  var node = this, nodes = [node];
+  while (node = node.parent) {
+    nodes.push(node);
+  }
+  return nodes;
+}
+
+function node_descendants() {
+  return Array.from(this);
+}
+
+function node_leaves() {
+  var leaves = [];
+  this.eachBefore(function(node) {
+    if (!node.children) {
+      leaves.push(node);
+    }
+  });
+  return leaves;
+}
+
+function node_links() {
+  var root = this, links = [];
+  root.each(function(node) {
+    if (node !== root) { // Don’t include the root’s parent, if any.
+      links.push({source: node.parent, target: node});
+    }
+  });
+  return links;
+}
+
+function* node_iterator() {
+  var node = this, current, next = [node], children, i, n;
+  do {
+    current = next.reverse(), next = [];
+    while (node = current.pop()) {
+      yield node;
+      if (children = node.children) {
+        for (i = 0, n = children.length; i < n; ++i) {
+          next.push(children[i]);
+        }
+      }
+    }
+  } while (next.length);
+}
+
+function hierarchy(data, children) {
+  if (data instanceof Map) {
+    data = [undefined, data];
+    if (children === undefined) children = mapChildren;
+  } else if (children === undefined) {
+    children = objectChildren;
+  }
+
+  var root = new Node(data),
+      node,
+      nodes = [root],
+      child,
+      childs,
+      i,
+      n;
+
+  while (node = nodes.pop()) {
+    if ((childs = children(node.data)) && (n = (childs = Array.from(childs)).length)) {
+      node.children = childs;
+      for (i = n - 1; i >= 0; --i) {
+        nodes.push(child = childs[i] = new Node(childs[i]));
+        child.parent = node;
+        child.depth = node.depth + 1;
+      }
+    }
+  }
+
+  return root.eachBefore(computeHeight);
+}
+
+function node_copy() {
+  return hierarchy(this).eachBefore(copyData);
+}
+
+function objectChildren(d) {
+  return d.children;
+}
+
+function mapChildren(d) {
+  return Array.isArray(d) ? d[1] : null;
+}
+
+function copyData(node) {
+  if (node.data.value !== undefined) node.value = node.data.value;
+  node.data = node.data.data;
+}
+
+function computeHeight(node) {
+  var height = 0;
+  do node.height = height;
+  while ((node = node.parent) && (node.height < ++height));
+}
+
+function Node(data) {
+  this.data = data;
+  this.depth =
+  this.height = 0;
+  this.parent = null;
+}
+
+Node.prototype = hierarchy.prototype = {
+  constructor: Node,
+  count: node_count,
+  each: node_each,
+  eachAfter: node_eachAfter,
+  eachBefore: node_eachBefore,
+  find: node_find,
+  sum: node_sum,
+  sort: node_sort,
+  path: node_path,
+  ancestors: node_ancestors,
+  descendants: node_descendants,
+  leaves: node_leaves,
+  links: node_links,
+  copy: node_copy,
+  [Symbol.iterator]: node_iterator
+};
+
+/**
+ * Input normalization: both accepted input shapes collapse into ONE decorated
+ * `d3.hierarchy`, so every layout strategy and every renderer downstream sees
+ * exactly one data structure.
+ *
+ *   A) flat rows + keys   { data: [...], keys: ["year","month","day"] }
+ *   B) nested tree        { root: {...}, children: d => d.children }
+ *
+ * (A) is the "tidy long table" form — a sorted list of value-tuples, which is
+ * what a single SQL `GROUP BY` hands you. (B) is for ragged/precomputed trees.
+ */
+
+
+/** Field on every node.data. `value` is the node's own key-value (e.g. "2024"),
+ * NOT a count — counts live on `node.count`.
+ * @typedef {{key: string|null, value: any, label: string, row: any}} NodeDatum */
+
+// A separator that cannot occur inside a key or a value. Written as an ESCAPE,
+// never as a literal NUL byte: a raw \0 in the source makes the whole file look
+// like binary data, and grep silently reports no matches in it. That cost an hour.
+const PATH_SEP = "\u0000";
+
+/**
+ * The id of a path — the ONE place it is spelled.
+ *
+ * `fisheyeNav` used to build the selected id by joining with a space while the
+ * rows joined with PATH_SEP, so a selection deeper than one level could never
+ * match a row: selecting a DAY never highlighted it, and never labelled it. It
+ * hid because the only test selected a depth-1 path, where the two joins produce
+ * the same string.
+ */
+const idOfPath = (path) =>
+  path.map((p) => p.key + "=" + p.value).join(PATH_SEP);
+
+/**
+ * Roll a flat, pre-sorted row list up into a nested tree, preserving the row
+ * order as the child order at every level. Order matters: the host (AutoGallery)
+ * hands us rows already sorted the way its feed is sorted, and the navigator
+ * must mirror that exactly — so we never re-sort, we just group.
+ */
+function rollup(rows, keys, valueOf, countOf) {
+  const root = { key: null, value: null, children: [], row: null };
+  const byPath = new Map([["", root]]);
+
+  for (const row of rows) {
+    let node = root;
+    let path = "";
+    for (const key of keys) {
+      const value = valueOf(row, key);
+      path += PATH_SEP + key + "=" + value;
+      let child = byPath.get(path);
+      if (!child) {
+        child = { key, value, children: [], row: null };
+        byPath.set(path, child);
+        node.children.push(child);
+      }
+      node = child;
+    }
+    // `node` is now the leaf for this row's key-tuple. Several rows can land on
+    // the same leaf; their counts add up and the last row wins as the exemplar.
+    node.row = row;
+    node.ownCount = (node.ownCount ?? 0) + countOf(row);
+  }
+  return root;
+}
+
+/**
+ * Give every internal node a synthetic HEADER pseudo-leaf as its first child.
+ *
+ * This is what makes the flat (indented outline) view possible without a second
+ * layout engine. The layout distributes pixels over the LEAF axis, and a
+ * parent's band is exactly the span of its children — so there is no vertical
+ * space anywhere for a parent's own label to live. In an icicle that's fine (the
+ * parent owns a column); in a flat list it means an internal node has no row,
+ * and with nothing to indent relative to, "indent by level" says nothing.
+ *
+ * A header cell costs one slot on the leaf axis and carries `count: 0`, so mass
+ * conservation is untouched, and it sits INSIDE its parent's interval, so
+ * containment is untouched. Every downstream stage needs zero changes.
+ */
+function withHeaders(raw, childrenOf, isRoot = true) {
+  const kids = childrenOf(raw);
+  if (!kids?.length) return raw;
+  const nested = kids.map((k) => withHeaders(k, childrenOf, false));
+  // The root is never drawn (depth 0), so a header for it would surface as a
+  // stray depth-1 row labelled with nothing.
+  if (isRoot) return { ...raw, children: nested };
+  return {
+    ...raw,
+    children: [{ __header: true, __of: raw, children: null }, ...nested],
+  };
+}
+
+/** Depth-first, in child order. */
+function walk(node, visit) {
+  visit(node);
+  if (node.children) for (const c of node.children) walk(c, visit);
+}
+
+/**
+ * Decorate a d3.hierarchy in place with everything the layouts and renderers
+ * need, so neither has to re-derive it:
+ *   node.count      photo mass (leaf: from the data; internal: sum of children)
+ *   node.leafStart  index of its first descendant leaf   } the interval the
+ *   node.leafEnd    index past its last descendant leaf  } fisheye distorts
+ *   node.path       [{key, value}, …] from the root down to this node
+ *   node.id         stable string id (survives relayout; keys the DOM)
+ *   node.label      display string
+ *
+ * `leafStart`/`leafEnd` are the load-bearing bit of the redesign: once every
+ * node owns a LEAF INTERVAL, a parent's band is just the union of its children's
+ * bands, and "parents contain their children" stops being something a renderer
+ * has to be careful about and becomes true by construction.
+ */
+function decorate(root, labelOf) {
+  const leaves = [];
+  walk(root, (n) => {
+    if (!n.children?.length) leaves.push(n);
+  });
+
+  leaves.forEach((leaf, i) => {
+    leaf.leafStart = i;
+    leaf.leafEnd = i + 1;
+  });
+
+  // Pre-order: a node's path extends its PARENT's, so parents go first.
+  root.eachBefore((n) => {
+    const d = n.data;
+    // Coerce here, once. A host's `label` accessor is arbitrary user code and
+    // may well return undefined for a key it doesn't know about (an unknown
+    // dimension, the synthetic root's null key). The renderer must never be the
+    // place that discovers this — a widget that throws because a consumer's
+    // accessor came back empty is a broken widget.
+    n.label = String(labelOf(d.value, d.key, n) ?? d.value ?? "");
+    if (d.header) {
+      // A header stands in for its parent: same path (so clicking it selects the
+      // parent, which is what you mean when you click "2024"), distinct id.
+      n.keyPath = n.parent.keyPath;
+      n.id = n.parent.id + "#header";
+      return;
+    }
+    // `keyPath`, NOT `path` — d3's HierarchyNode already has a `.path(target)`
+    // method, and an own property would silently shadow it.
+    n.keyPath =
+      n.depth === 0
+        ? []
+        : [...n.parent.keyPath, { key: d.key, value: d.value }];
+    n.id = idOfPath(n.keyPath);
+  });
+
+  // Post-order: a node's count and leaf interval aggregate its CHILDREN's, so
+  // children go first.
+  root.eachAfter((n) => {
+    if (!n.children?.length) {
+      n.count = n.data.ownCount ?? n.data.count ?? 0;
+      return;
+    }
+    n.count = 0;
+    n.leafStart = Infinity;
+    n.leafEnd = -Infinity;
+    for (const c of n.children) {
+      n.count += c.count;
+      if (c.leafStart < n.leafStart) n.leafStart = c.leafStart;
+      if (c.leafEnd > n.leafEnd) n.leafEnd = c.leafEnd;
+    }
+  });
+
+  root.leaves_ = leaves;
+  return root;
+}
+
+const defaultLabel = (value) => (value == null ? "" : String(value));
+
+/**
+ * Normalize either input shape into one decorated hierarchy.
+ *
+ * @param {object} spec
+ * @param {any[]} [spec.data]      flat, pre-sorted rows (shape A)
+ * @param {string[]} [spec.keys]   the levels, outermost first (shape A)
+ * @param {any} [spec.root]        a nested tree (shape B)
+ * @param {(d:any)=>any[]} [spec.children]  child accessor (shape B)
+ * @param {(row:any, key:string)=>any} [spec.value]  how to read a key off a row
+ * @param {(d:any)=>number} [spec.count]    leaf mass; defaults to `d.count ?? 1`
+ * @param {(value:any, key:string, node:any)=>string} [spec.label]
+ * @returns {import("d3-hierarchy").HierarchyNode<NodeDatum> & {leaves_: any[]}}
+ */
+function normalize$1(spec = {}) {
+  const {
+    data,
+    keys,
+    root: treeRoot,
+    children = (d) => d.children,
+    value = (row, key) => row[key],
+    count = (d) => d.count ?? 1,
+    label = defaultLabel,
+    headers = false,
+  } = spec;
+
+  const maybeHeaders = (raw, childrenOf) =>
+    headers ? withHeaders(raw, childrenOf) : raw;
+
+  let root;
+  if (treeRoot != null) {
+    root = hierarchy(maybeHeaders(treeRoot, children), (d) =>
+      headers ? d.children : children(d),
+    );
+    // Shape B nodes carry their own key/value/count; mirror them onto the
+    // NodeDatum contract so `decorate` and the renderers stay shape-agnostic.
+    root.each((n) => {
+      const d = n.data ?? {};
+      const of = d.__header ? d.__of : d;
+      n.data = {
+        key: of.key ?? null,
+        value: of.value ?? of.name ?? of.id ?? null,
+        row: of,
+        header: !!d.__header,
+        ownCount: d.__header ? 0 : n.children?.length ? undefined : count(of),
+      };
+    });
+  } else if (Array.isArray(data) && Array.isArray(keys)) {
+    root = hierarchy(
+      maybeHeaders(rollup(data, keys, value, count), (d) => d.children),
+      (d) => d.children,
+    );
+    if (headers) {
+      root.each((n) => {
+        if (!n.data.__header) return;
+        const of = n.data.__of;
+        n.data = {
+          key: of.key,
+          value: of.value,
+          row: of.row,
+          header: true,
+          ownCount: 0,
+        };
+      });
+    }
+  } else {
+    // An empty widget is a normal state (no library loaded yet), not an error.
+    root = hierarchy({ key: null, value: null, children: [], ownCount: 0 });
+  }
+
+  return decorate(root, label);
+}
+
+/** The ordered leaf list — the sequence the fisheye lens distorts. */
+function leavesOf(root) {
+  return root.leaves_ ?? root.leaves();
+}
+
+/** Every node except the synthetic root, in depth-first (visual) order. */
+function nodesOf(root) {
+  const out = [];
+  walk(root, (n) => {
+    if (n.depth > 0) out.push(n);
+  });
+  return out;
+}
+
+/**
+ * Stage 1: choose the SLOTS — the contiguous partition of the leaf axis that
+ * the positioner lays out. A slot is one of:
+ *
+ *   leaf      one real leaf
+ *   collapsed one closed subtree, standing in for all its leaves ("2019 · 1,204")
+ *   elision   a RUN of adjacent closed siblings, merged ("4 more groups")
+ *
+ * Two selectors, same output shape, so the positioner and renderers never learn
+ * which one ran:
+ *
+ *   selectAll  every leaf is its own slot. Honest, proportional, no elision.
+ *   selectDOI  Furnas degree-of-interest: score the leaves, keep the best ones
+ *              that fit the row budget, close everything else.
+ *
+ * Why score LEAVES and not internal nodes: a selector that can only choose which
+ * subtrees to *open* cannot be bounded. To show the focused leaf you must open
+ * its whole ancestor chain, and each open node drags in its siblings — on a
+ * 10-year library that is already 48 rows before you have chosen anything. So
+ * the budget has to bite at the leaf level, and structure falls out of it:
+ * a node is open iff it still holds a kept leaf.
+ */
+
+
+/** @typedef {{node: any|null, parent?: any, nodes?: any[], leafStart: number,
+ *             leafEnd: number, count?: number}} Slot */
+
+/** One slot per leaf. Carries `count` like every other slot — `sizeBy: "count"`
+ * weights the column by slot mass, and a slot without it silently weighs zero. */
+function selectAll(root) {
+  return leavesOf(root).map((node) => ({
+    node,
+    leafStart: node.leafStart,
+    leafEnd: node.leafEnd,
+    count: node.count,
+  }));
+}
+
+/** Distance from a node's leaf interval to the focused leaf; 0 if it contains it. */
+function leafDistance(node, focusLeaf) {
+  if (focusLeaf >= node.leafStart && focusLeaf < node.leafEnd) return 0;
+  return focusLeaf < node.leafStart
+    ? node.leafStart - focusLeaf
+    : focusLeaf - (node.leafEnd - 1);
+}
+
+/**
+ * Hops from `a` up to the lowest common ancestor and back down to `b`. This is
+ * Furnas's tree distance, and it is the thing a purely positional distance
+ * cannot see: the day before the focused day might be three rows up but a whole
+ * YEAR away in the tree, while the focused day's own siblings are structurally
+ * adjacent no matter where they land on the axis.
+ */
+function treeDistance(a, b) {
+  let x = a;
+  let y = b;
+  let d = 0;
+  while (x.depth > y.depth) {
+    x = x.parent;
+    d++;
+  }
+  while (y.depth > x.depth) {
+    y = y.parent;
+    d++;
+  }
+  while (x !== y && x.parent && y.parent) {
+    x = x.parent;
+    y = y.parent;
+    d += 2;
+  }
+  return d;
+}
+
+/**
+ * Furnas's degree of interest: how badly does the user want to see this leaf,
+ * given where they are looking?
+ *
+ *     DOI(leaf) = importance(leaf) - distance(leaf, focus) + mass(leaf)
+ *
+ * Leaves are ranked by this and the best ones that fit the budget keep a full
+ * row; the rest close into their ancestors. This function alone decides what a
+ * DOI tree FEELS like, so each term is deliberate:
+ *
+ *  - **importance** is depth measured RELATIVE to the focus, not absolutely. The
+ *    textbook `-depth` says a deep leaf matters less — true for the *root*'s
+ *    importance, false for leaves. In a ragged tree a depth-5 leaf isn't less
+ *    interesting than a depth-2 one, it's just more nested; what actually reads
+ *    badly is jumping between levels, so we penalise the level CHANGE.
+ *
+ *  - **distance** blends the two notions of "far", because each alone fails:
+ *    the leaf axis alone gives a clean readable window but is blind to
+ *    structure; the tree alone keeps the focus's siblings but scatters the
+ *    survivors across the column. `treeWeight` slides between them.
+ *    Axis distance goes through `log1p` so the falloff is smooth — a linear
+ *    penalty makes rank flip sharply as the focus moves, which is exactly what
+ *    makes rows pop in and out while you drag the cursor.
+ *
+ *  - **mass** is a weak tiebreaker, never a driver. Let it dominate and the lens
+ *    stops being about where you are and becomes a popularity chart.
+ *
+ * @param {any} leaf   hierarchy node (.depth, .count, .leafStart, .leafEnd, .parent)
+ * @param {{leaf: number, node: any}} focus  focused leaf index and its node
+ * @param {{apiWeight, distanceWeight, countWeight, treeWeight}} opts
+ * @returns {number}  higher = more interesting = more likely to keep its own row
+ */
+function doiScore(leaf, focus, opts) {
+  const importance = -Math.abs(leaf.depth - focus.node.depth) * opts.apiWeight;
+
+  const axis = Math.log1p(leafDistance(leaf, focus.leaf));
+  const tree = treeDistance(leaf, focus.node);
+  const t = opts.treeWeight;
+  const distance = ((1 - t) * axis + t * tree) * opts.distanceWeight;
+
+  const mass = Math.log1p(leaf.count) * opts.countWeight;
+
+  return importance - distance + mass;
+}
+
+/**
+ * Keep the highest-DOI leaves that fit the row budget; close the rest.
+ *
+ * Guarantees the property tests lean on:
+ *  - slots partition [0, nLeaves) contiguously, so mass is always conserved;
+ *  - the focused leaf ALWAYS keeps its own slot — you can never lose the row you
+ *    are pointing at, whatever the budget;
+ *  - slot count <= budget (that is what the K search below is for).
+ *
+ * @param {any} root
+ * @param {{budget: number, focusLeaf: number} & Record<string, number>} opts
+ * @returns {Slot[]}
+ */
+function selectDOI(root, opts) {
+  const leaves = leavesOf(root);
+  const n = leaves.length;
+  if (!n) return [];
+
+  const budget = Math.max(1, Math.floor(opts.budget ?? n));
+  if (n <= budget) return selectAll(root);
+
+  const focusLeaf = Math.max(0, Math.min(opts.focusLeaf ?? 0, n - 1));
+  const focus = { leaf: focusLeaf, node: leaves[focusLeaf] };
+
+  // Rank once. Header cells are excluded: they are force-kept whenever their
+  // node is open, so ranking them would just burn budget entries on rows we were
+  // going to draw anyway. Ties break toward the focus, then by leaf order, so the
+  // result is deterministic (a property test asserts it).
+  const ranked = leaves
+    .map((leaf, i) => ({ leaf, i, score: doiScore(leaf, focus, opts) }))
+    .filter(({ leaf }) => !leaf.data?.header)
+    .sort(
+      (a, b) =>
+        b.score - a.score ||
+        Math.abs(a.i - focusLeaf) - Math.abs(b.i - focusLeaf) ||
+        a.i - b.i,
+    );
+
+  // Closing leaves ADDS rows back (a closed subtree is still one row), so K is
+  // not simply the budget. Walk K down until the realized slot count fits. It
+  // converges fast — closed rows only ever shrink as K shrinks.
+  for (let K = Math.min(budget, n); K >= 1; K--) {
+    const keep = new Set(ranked.slice(0, K).map((r) => r.leaf));
+    keep.add(focus.node);
+    const slots = buildSlots(root, keep);
+    if (slots.length <= budget) return slots;
+  }
+  return buildSlots(root, new Set([focus.node]));
+}
+
+/**
+ * Turn a set of kept leaves into the slot partition.
+ *
+ * A node is OPEN iff it still contains a kept leaf. Under an open node, each
+ * child is either open (recurse) or closed (one slot). Adjacent closed children
+ * merge into a single elision slot — without that merge, a wide node whose
+ * children are all closed would spend one row per child and blow the budget it
+ * was supposed to be saving.
+ */
+function buildSlots(root, keep) {
+  const holdsKept = new Map();
+  root.eachAfter((n) => {
+    if (!n.children?.length) return holdsKept.set(n, keep.has(n));
+    holdsKept.set(
+      n,
+      n.children.some((c) => holdsKept.get(c)),
+    );
+  });
+
+  const slots = [];
+  let run = null; // the closed run currently being accumulated
+
+  const flush = () => {
+    if (!run) return;
+    slots.push(
+      run.nodes.length === 1
+        ? {
+            node: run.nodes[0],
+            leafStart: run.leafStart,
+            leafEnd: run.leafEnd,
+            count: run.count,
+          }
+        : {
+            node: null,
+            parent: run.parent,
+            nodes: run.nodes,
+            leafStart: run.leafStart,
+            leafEnd: run.leafEnd,
+            count: run.count,
+          },
+    );
+    run = null;
+  };
+
+  (function descend(node) {
+    for (const child of node.children ?? []) {
+      // A header always survives while its parent is open — a node that shows
+      // its children but not its own label is worse than useless.
+      const isHeader = child.data?.header;
+      const open = holdsKept.get(child) && child.children?.length;
+      const kept =
+        isHeader || (holdsKept.get(child) && !child.children?.length);
+
+      if (open || kept) {
+        flush(); // a visible child breaks the closed run
+        if (open) descend(child);
+        else
+          slots.push({
+            node: child,
+            leafStart: child.leafStart,
+            leafEnd: child.leafEnd,
+            count: child.count,
+          });
+        continue;
+      }
+
+      // Closed: accumulate into the current run of adjacent closed siblings.
+      if (run && run.parent === node) {
+        run.nodes.push(child);
+        run.leafEnd = child.leafEnd;
+        run.count += child.count;
+      } else {
+        flush();
+        run = {
+          parent: node,
+          nodes: [child],
+          leafStart: child.leafStart,
+          leafEnd: child.leafEnd,
+          count: child.count,
+        };
+      }
+    }
+    flush(); // a run never spans out of its parent — that would break containment
+  })(root);
+
+  return slots;
+}
+
+/**
+ * Stage 2 of the layout: turn a slot sequence into pixel boundaries.
+ *
+ * Two steps, deliberately separate:
+ *
+ *   basePositions()  how much column each slot gets BEFORE any lens. Either
+ *                    equal spans (`sizeBy: "slots"` — size encodes interest) or
+ *                    spans proportional to mass (`sizeBy: "count"` — size encodes
+ *                    photo count, a true value-encoded partition diagram).
+ *   distort()        the fisheye, applied on top of whatever base it is given.
+ *
+ * The fisheye only needs its input to be monotonic, so it composes with either
+ * base for free. `x === a` stays a fixed point, which is what keeps the row under
+ * the cursor the row you click — mass-weighted or not.
+ *
+ * A slot sequence of length S gets S+1 boundaries spanning [min, max]. Slot j
+ * owns [pos[j], pos[j+1]], so the last slot gets a real band instead of
+ * collapsing onto the bottom edge.
+ */
+
+const SIZE_BY = ["slots", "count"];
+
+/**
+ * The fisheye scale, ported verbatim from AutoGallery's `fisheye.js`, which
+ * ported it from PhotoRing's `d3_fisheye_scale` (d3 v3). Maps a base position
+ * `x` in [min, max] to a distorted position that magnifies around focus pixel
+ * `a` and compresses away from it. Monotonic in `x`; `x === a` is a fixed point;
+ * the endpoints map to themselves. Larger `d` = gentler distortion.
+ *
+ * This math is correct and well covered — it is the one piece carried over
+ * untouched.
+ *
+ * @returns {number}
+ */
+function fisheyePosition(x, a, min, max, d) {
+  const left = x < a;
+  let m = left ? a - min : max - a;
+  if (m === 0) m = max - min;
+  const dx = Math.abs(x - a);
+  if (dx < 1e-9) return a;
+  return ((left ? -1 : 1) * (m * (d + 1))) / (d + m / dx) + a;
+}
+
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+
+/**
+ * Base (undistorted) boundaries for a sequence of weighted items.
+ *
+ * `sizeBy: "count"` is the honest icicle: a 40,000-photo year visibly dwarfs a
+ * 400-photo one. But a pure mass split gives a zero-count group a zero-height
+ * band — invisible, and impossible to click. So every item is guaranteed
+ * `sizeFloor` of an equal share, and only the remainder is divided by mass:
+ *
+ *     span(j) = (1 - sizeFloor) * mass(j)/total  +  sizeFloor * 1/S
+ *
+ * sizeFloor = 1 collapses back to equal spans, so the two modes are the ends of
+ * one continuum rather than two code paths.
+ *
+ * @param {Array<{count?: number}>} items
+ * @param {{min:number, max:number, sizeBy?:string, sizeFloor?:number}} o
+ * @returns {number[]} S+1 boundaries
+ */
+function basePositions(
+  items,
+  { min, max, sizeBy = "slots", sizeFloor = 0.25 },
+) {
+  const S = items.length;
+  const span = max - min;
+  const pos = new Array(S + 1);
+  pos[0] = min;
+
+  if (sizeBy !== "count") {
+    for (let j = 1; j <= S; j++) pos[j] = min + (span * j) / S;
+    pos[S] = max;
+    return pos;
+  }
+
+  const total = items.reduce((s, it) => s + Math.max(0, it.count ?? 0), 0);
+  const f = total > 0 ? clamp(sizeFloor, 0, 1) : 1; // no mass anywhere -> equal
+  let acc = min;
+  for (let j = 0; j < S; j++) {
+    const mass = total > 0 ? Math.max(0, items[j].count ?? 0) / total : 0;
+    acc += span * ((1 - f) * mass + f / S);
+    pos[j + 1] = acc;
+  }
+  pos[S] = max; // absorb float drift into the endpoint, which is pinned anyway
+  return pos;
+}
+
+/** The slot whose base interval contains pixel `px`. Works for ANY spacing —
+ * which is why this is a search and not a `scale.invert()`. */
+function slotAtPixel(basePos, px) {
+  const S = basePos.length - 1;
+  if (S <= 0) return 0;
+  let lo = 0;
+  let hi = S - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (basePos[mid] <= px) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+}
+
+/**
+ * Resolve the focus into BOTH representations:
+ *   `px`   the focus pixel (what the lens magnifies around)
+ *   `slot` the slot sitting under that pixel (what gets highlighted)
+ *
+ * When the host pins the focus to the cursor (`focus.px`), the pixel is
+ * authoritative and the slot is derived — that is what keeps the magnified row
+ * exactly under the pointer, so a click never lands on a row that slid away.
+ * When the host drives the focus from its own state (`focus.slot`), the slot is
+ * authoritative and the pixel is derived (the middle of its band).
+ */
+function resolveFocus(focus, basePos) {
+  const S = basePos.length - 1;
+  const min = basePos[0];
+  const max = basePos[S];
+  if (S <= 0) return { px: min, slot: 0 };
+
+  if (focus?.px != null) {
+    const px = clamp(focus.px, min, max);
+    return { px, slot: slotAtPixel(basePos, px) };
+  }
+  const slot = clamp(focus?.slot ?? 0, 0, S - 1);
+  return { px: (basePos[slot] + basePos[slot + 1]) / 2, slot };
+}
+
+/** Apply the fisheye to a base boundary array. */
+function distort(basePos, { focusPx, distortion }) {
+  const S = basePos.length - 1;
+  const min = basePos[0];
+  const max = basePos[S];
+  const a = clamp(focusPx, min, max);
+  const pos = basePos.map((x) => fisheyePosition(x, a, min, max, distortion));
+  // The scale pins the endpoints analytically; clamp anyway so floating-point
+  // drift can never push a band a hair outside the padded column.
+  pos[0] = min;
+  pos[S] = max;
+  return pos;
+}
+
+/**
+ * Stage 3: slots + pixel boundaries -> rows.
+ *
+ * This is where "parents contain their children" stops being something a
+ * renderer has to be careful about. Every node already owns a leaf interval
+ * (`leafStart`..`leafEnd`, from hierarchy.js), and the slots partition that same
+ * leaf axis. So a node's band is just the pixel span of the slots its leaf
+ * interval covers — and since a child's leaf interval is a SUBSET of its
+ * parent's, its band is necessarily inside its parent's. Containment is
+ * arithmetic, not diligence.
+ *
+ * A node is drawn iff its leaf interval is a whole number of slots AND no closed
+ * ancestor is standing in for it.
+ */
+
+/** @typedef {{node: any|null, parent?: any, nodes?: any[], leafStart: number,
+ *             leafEnd: number, count?: number}} Slot */
+
+/**
+ * @param {any} root            decorated hierarchy (see hierarchy.js)
+ * @param {Slot[]} slots        contiguous partition of the leaf axis
+ * @param {number[]} pos        slots.length + 1 pixel boundaries
+ * @param {{focusSlot?: number}} [opts]
+ * @returns {{rows: any[], maxCount: number}}
+ */
+function buildRows(root, slots, pos, opts = {}) {
+  const S = slots.length;
+  if (!S) return { rows: [], maxCount: 0 };
+
+  const nLeaves = slots[S - 1].leafEnd;
+  const slotOfLeaf = new Int32Array(nLeaves);
+  for (let j = 0; j < S; j++) {
+    for (let i = slots[j].leafStart; i < slots[j].leafEnd; i++)
+      slotOfLeaf[i] = j;
+  }
+
+  // Nodes that a closed slot is standing in for. Without this, a chain like
+  // 2019 > 12 > 31 that is closed at "2019" would draw all three bands stacked
+  // on the same pixels — they all happen to span exactly one slot.
+  const hidden = new Set();
+  const hide = (n) => n.each?.((d) => d !== n && hidden.add(d));
+  for (const slot of slots) {
+    if (slot.node?.children?.length) hide(slot.node);
+    if (slot.nodes) for (const n of slot.nodes) n.each((d) => hidden.add(d));
+  }
+
+  const focusSlot = opts.focusSlot;
+  const rows = [];
+  let maxCount = 0;
+
+  const push = (row) => {
+    rows.push(row);
+    if (row.terminal && row.count > maxCount) maxCount = row.count;
+  };
+
+  const band = (sStart, sEnd) => {
+    const y0 = pos[sStart];
+    const y1 = pos[sEnd];
+    return {
+      slotStart: sStart,
+      slotEnd: sEnd,
+      leafStart: slots[sStart].leafStart,
+      leafEnd: slots[sEnd - 1].leafEnd,
+      focused: focusSlot != null && focusSlot >= sStart && focusSlot < sEnd,
+      y0,
+      y1,
+      y: (y0 + y1) / 2,
+      thickness: y1 - y0,
+    };
+  };
+
+  root.each((node) => {
+    if (node.depth === 0) return; // the synthetic root is not a row
+    if (hidden.has(node)) return;
+    if (node.leafStart >= nLeaves) return;
+
+    const sStart = slotOfLeaf[node.leafStart];
+    const sEnd = slotOfLeaf[node.leafEnd - 1] + 1;
+    const aligned =
+      slots[sStart].leafStart === node.leafStart &&
+      slots[sEnd - 1].leafEnd === node.leafEnd;
+    if (!aligned) return;
+
+    const slot = slots[sStart];
+    const collapsed =
+      sEnd - sStart === 1 && slot.node === node && !!node.children?.length;
+    // Terminal rows carry the count histogram: real leaves and closed subtrees.
+    // Everything else is structure.
+    const terminal = collapsed || !node.children?.length;
+
+    push({
+      node,
+      parentNode: node.parent,
+      id: node.id,
+      depth: node.depth,
+      label: node.label,
+      path: node.keyPath,
+      count: node.count,
+      kind: node.data?.header
+        ? "header"
+        : collapsed
+          ? "collapsed"
+          : terminal
+            ? "leaf"
+            : "branch",
+      terminal,
+      elided: collapsed ? node.leafEnd - node.leafStart : 0,
+      ...band(sStart, sEnd),
+    });
+  });
+
+  // Elision slots have no node of their own, so they are not reachable from the
+  // walk above — emit them here.
+  slots.forEach((slot, j) => {
+    if (slot.node || !slot.nodes) return;
+    const first = slot.nodes[0];
+    push({
+      node: null,
+      parentNode: slot.parent,
+      nodes: slot.nodes,
+      id: `elision:${first.id}+${slot.nodes.length}`,
+      depth: first.depth,
+      label: `${slot.nodes.length} more`,
+      path: slot.parent.keyPath,
+      count: slot.count,
+      kind: "elision",
+      terminal: true,
+      elided: slot.leafEnd - slot.leafStart,
+      ...band(j, j + 1),
+    });
+  });
+
+  rows.sort((a, b) => a.y0 - b.y0 || a.depth - b.depth);
+  return { rows, maxCount };
+}
+
+function ascending(a, b) {
+  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+}
+
+function descending(a, b) {
+  return a == null || b == null ? NaN
+    : b < a ? -1
+    : b > a ? 1
+    : b >= a ? 0
+    : NaN;
+}
+
+function bisector(f) {
+  let compare1, compare2, delta;
+
+  // If an accessor is specified, promote it to a comparator. In this case we
+  // can test whether the search value is (self-) comparable. We can’t do this
+  // for a comparator (except for specific, known comparators) because we can’t
+  // tell if the comparator is symmetric, and an asymmetric comparator can’t be
+  // used to test whether a single value is comparable.
+  if (f.length !== 2) {
+    compare1 = ascending;
+    compare2 = (d, x) => ascending(f(d), x);
+    delta = (d, x) => f(d) - x;
+  } else {
+    compare1 = f === ascending || f === descending ? f : zero$1;
+    compare2 = f;
+    delta = f;
+  }
+
+  function left(a, x, lo = 0, hi = a.length) {
+    if (lo < hi) {
+      if (compare1(x, x) !== 0) return hi;
+      do {
+        const mid = (lo + hi) >>> 1;
+        if (compare2(a[mid], x) < 0) lo = mid + 1;
+        else hi = mid;
+      } while (lo < hi);
+    }
+    return lo;
+  }
+
+  function right(a, x, lo = 0, hi = a.length) {
+    if (lo < hi) {
+      if (compare1(x, x) !== 0) return hi;
+      do {
+        const mid = (lo + hi) >>> 1;
+        if (compare2(a[mid], x) <= 0) lo = mid + 1;
+        else hi = mid;
+      } while (lo < hi);
+    }
+    return lo;
+  }
+
+  function center(a, x, lo = 0, hi = a.length) {
+    const i = left(a, x, lo, hi - 1);
+    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+  }
+
+  return {left, center, right};
+}
+
+function zero$1() {
+  return 0;
+}
+
+function number$1(x) {
+  return x === null ? NaN : +x;
+}
+
+const ascendingBisect = bisector(ascending);
+const bisectRight = ascendingBisect.right;
+bisector(number$1).center;
+
+const e10 = Math.sqrt(50),
+    e5 = Math.sqrt(10),
+    e2 = Math.sqrt(2);
+
+function tickSpec(start, stop, count) {
+  const step = (stop - start) / Math.max(0, count),
+      power = Math.floor(Math.log10(step)),
+      error = step / Math.pow(10, power),
+      factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
+  let i1, i2, inc;
+  if (power < 0) {
+    inc = Math.pow(10, -power) / factor;
+    i1 = Math.round(start * inc);
+    i2 = Math.round(stop * inc);
+    if (i1 / inc < start) ++i1;
+    if (i2 / inc > stop) --i2;
+    inc = -inc;
+  } else {
+    inc = Math.pow(10, power) * factor;
+    i1 = Math.round(start / inc);
+    i2 = Math.round(stop / inc);
+    if (i1 * inc < start) ++i1;
+    if (i2 * inc > stop) --i2;
+  }
+  if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
+  return [i1, i2, inc];
+}
+
+function ticks(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  if (!(count > 0)) return [];
+  if (start === stop) return [start];
+  const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);
+  if (!(i2 >= i1)) return [];
+  const n = i2 - i1 + 1, ticks = new Array(n);
+  if (reverse) {
+    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;
+    else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;
+  } else {
+    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;
+    else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;
+  }
+  return ticks;
+}
+
+function tickIncrement(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  return tickSpec(start, stop, count)[2];
+}
+
+function tickStep(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  const reverse = stop < start, inc = reverse ? tickIncrement(stop, start, count) : tickIncrement(start, stop, count);
+  return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
+}
+
+function initRange(domain, range) {
+  switch (arguments.length) {
+    case 0: break;
+    case 1: this.range(domain); break;
+    default: this.range(range).domain(domain); break;
+  }
+  return this;
+}
+
+function define(constructor, factory, prototype) {
+  constructor.prototype = factory.prototype = prototype;
+  prototype.constructor = constructor;
+}
+
+function extend(parent, definition) {
+  var prototype = Object.create(parent.prototype);
+  for (var key in definition) prototype[key] = definition[key];
+  return prototype;
+}
+
+function Color() {}
+
+var darker = 0.7;
+var brighter = 1 / darker;
+
+var reI = "\\s*([+-]?\\d+)\\s*",
+    reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+    reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+    reHex = /^#([0-9a-f]{3,8})$/,
+    reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
+    reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
+    reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
+    reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
+    reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
+    reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
+
+var named = {
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aqua: 0x00ffff,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  black: 0x000000,
+  blanchedalmond: 0xffebcd,
+  blue: 0x0000ff,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  cyan: 0x00ffff,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkgrey: 0xa9a9a9,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  fuchsia: 0xff00ff,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  gray: 0x808080,
+  green: 0x008000,
+  greenyellow: 0xadff2f,
+  grey: 0x808080,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgray: 0xd3d3d3,
+  lightgreen: 0x90ee90,
+  lightgrey: 0xd3d3d3,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  lime: 0x00ff00,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  magenta: 0xff00ff,
+  maroon: 0x800000,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  navy: 0x000080,
+  oldlace: 0xfdf5e6,
+  olive: 0x808000,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  purple: 0x800080,
+  rebeccapurple: 0x663399,
+  red: 0xff0000,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  silver: 0xc0c0c0,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  teal: 0x008080,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  white: 0xffffff,
+  whitesmoke: 0xf5f5f5,
+  yellow: 0xffff00,
+  yellowgreen: 0x9acd32
+};
+
+define(Color, color, {
+  copy(channels) {
+    return Object.assign(new this.constructor, this, channels);
+  },
+  displayable() {
+    return this.rgb().displayable();
+  },
+  hex: color_formatHex, // Deprecated! Use color.formatHex.
+  formatHex: color_formatHex,
+  formatHex8: color_formatHex8,
+  formatHsl: color_formatHsl,
+  formatRgb: color_formatRgb,
+  toString: color_formatRgb
+});
+
+function color_formatHex() {
+  return this.rgb().formatHex();
+}
+
+function color_formatHex8() {
+  return this.rgb().formatHex8();
+}
+
+function color_formatHsl() {
+  return hslConvert(this).formatHsl();
+}
+
+function color_formatRgb() {
+  return this.rgb().formatRgb();
+}
+
+function color(format) {
+  var m, l;
+  format = (format + "").trim().toLowerCase();
+  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
+      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
+      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+      : null) // invalid hex
+      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
+      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
+      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
+      : null;
+}
+
+function rgbn(n) {
+  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+}
+
+function rgba(r, g, b, a) {
+  if (a <= 0) r = g = b = NaN;
+  return new Rgb(r, g, b, a);
+}
+
+function rgbConvert(o) {
+  if (!(o instanceof Color)) o = color(o);
+  if (!o) return new Rgb;
+  o = o.rgb();
+  return new Rgb(o.r, o.g, o.b, o.opacity);
+}
+
+function rgb$1(r, g, b, opacity) {
+  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+}
+
+function Rgb(r, g, b, opacity) {
+  this.r = +r;
+  this.g = +g;
+  this.b = +b;
+  this.opacity = +opacity;
+}
+
+define(Rgb, rgb$1, extend(Color, {
+  brighter(k) {
+    k = k == null ? brighter : Math.pow(brighter, k);
+    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+  },
+  darker(k) {
+    k = k == null ? darker : Math.pow(darker, k);
+    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+  },
+  rgb() {
+    return this;
+  },
+  clamp() {
+    return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+  },
+  displayable() {
+    return (-0.5 <= this.r && this.r < 255.5)
+        && (-0.5 <= this.g && this.g < 255.5)
+        && (-0.5 <= this.b && this.b < 255.5)
+        && (0 <= this.opacity && this.opacity <= 1);
+  },
+  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
+  formatHex: rgb_formatHex,
+  formatHex8: rgb_formatHex8,
+  formatRgb: rgb_formatRgb,
+  toString: rgb_formatRgb
+}));
+
+function rgb_formatHex() {
+  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+}
+
+function rgb_formatHex8() {
+  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
+}
+
+function rgb_formatRgb() {
+  const a = clampa(this.opacity);
+  return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
+}
+
+function clampa(opacity) {
+  return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+}
+
+function clampi(value) {
+  return Math.max(0, Math.min(255, Math.round(value) || 0));
+}
+
+function hex(value) {
+  value = clampi(value);
+  return (value < 16 ? "0" : "") + value.toString(16);
+}
+
+function hsla(h, s, l, a) {
+  if (a <= 0) h = s = l = NaN;
+  else if (l <= 0 || l >= 1) h = s = NaN;
+  else if (s <= 0) h = NaN;
+  return new Hsl(h, s, l, a);
+}
+
+function hslConvert(o) {
+  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+  if (!(o instanceof Color)) o = color(o);
+  if (!o) return new Hsl;
+  if (o instanceof Hsl) return o;
+  o = o.rgb();
+  var r = o.r / 255,
+      g = o.g / 255,
+      b = o.b / 255,
+      min = Math.min(r, g, b),
+      max = Math.max(r, g, b),
+      h = NaN,
+      s = max - min,
+      l = (max + min) / 2;
+  if (s) {
+    if (r === max) h = (g - b) / s + (g < b) * 6;
+    else if (g === max) h = (b - r) / s + 2;
+    else h = (r - g) / s + 4;
+    s /= l < 0.5 ? max + min : 2 - max - min;
+    h *= 60;
+  } else {
+    s = l > 0 && l < 1 ? 0 : h;
+  }
+  return new Hsl(h, s, l, o.opacity);
+}
+
+function hsl(h, s, l, opacity) {
+  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+}
+
+function Hsl(h, s, l, opacity) {
+  this.h = +h;
+  this.s = +s;
+  this.l = +l;
+  this.opacity = +opacity;
+}
+
+define(Hsl, hsl, extend(Color, {
+  brighter(k) {
+    k = k == null ? brighter : Math.pow(brighter, k);
+    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+  },
+  darker(k) {
+    k = k == null ? darker : Math.pow(darker, k);
+    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+  },
+  rgb() {
+    var h = this.h % 360 + (this.h < 0) * 360,
+        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+        l = this.l,
+        m2 = l + (l < 0.5 ? l : 1 - l) * s,
+        m1 = 2 * l - m2;
+    return new Rgb(
+      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+      hsl2rgb(h, m1, m2),
+      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+      this.opacity
+    );
+  },
+  clamp() {
+    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+  },
+  displayable() {
+    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+        && (0 <= this.l && this.l <= 1)
+        && (0 <= this.opacity && this.opacity <= 1);
+  },
+  formatHsl() {
+    const a = clampa(this.opacity);
+    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
+  }
+}));
+
+function clamph(value) {
+  value = (value || 0) % 360;
+  return value < 0 ? value + 360 : value;
+}
+
+function clampt(value) {
+  return Math.max(0, Math.min(1, value || 0));
+}
+
+/* From FvD 13.37, CSS Color Module Level 3 */
+function hsl2rgb(h, m1, m2) {
+  return (h < 60 ? m1 + (m2 - m1) * h / 60
+      : h < 180 ? m2
+      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+      : m1) * 255;
+}
+
+var constant = x => () => x;
+
+function linear$1(a, d) {
+  return function(t) {
+    return a + t * d;
+  };
+}
+
+function exponential(a, b, y) {
+  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
+    return Math.pow(a + t * b, y);
+  };
+}
+
+function gamma(y) {
+  return (y = +y) === 1 ? nogamma : function(a, b) {
+    return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);
+  };
+}
+
+function nogamma(a, b) {
+  var d = b - a;
+  return d ? linear$1(a, d) : constant(isNaN(a) ? b : a);
+}
+
+var rgb = (function rgbGamma(y) {
+  var color = gamma(y);
+
+  function rgb(start, end) {
+    var r = color((start = rgb$1(start)).r, (end = rgb$1(end)).r),
+        g = color(start.g, end.g),
+        b = color(start.b, end.b),
+        opacity = nogamma(start.opacity, end.opacity);
+    return function(t) {
+      start.r = r(t);
+      start.g = g(t);
+      start.b = b(t);
+      start.opacity = opacity(t);
+      return start + "";
+    };
+  }
+
+  rgb.gamma = rgbGamma;
+
+  return rgb;
+})(1);
+
+function numberArray(a, b) {
+  if (!b) b = [];
+  var n = a ? Math.min(b.length, a.length) : 0,
+      c = b.slice(),
+      i;
+  return function(t) {
+    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
+    return c;
+  };
+}
+
+function isNumberArray(x) {
+  return ArrayBuffer.isView(x) && !(x instanceof DataView);
+}
+
+function genericArray(a, b) {
+  var nb = b ? b.length : 0,
+      na = a ? Math.min(nb, a.length) : 0,
+      x = new Array(na),
+      c = new Array(nb),
+      i;
+
+  for (i = 0; i < na; ++i) x[i] = interpolate(a[i], b[i]);
+  for (; i < nb; ++i) c[i] = b[i];
+
+  return function(t) {
+    for (i = 0; i < na; ++i) c[i] = x[i](t);
+    return c;
+  };
+}
+
+function date(a, b) {
+  var d = new Date;
+  return a = +a, b = +b, function(t) {
+    return d.setTime(a * (1 - t) + b * t), d;
+  };
+}
+
+function interpolateNumber(a, b) {
+  return a = +a, b = +b, function(t) {
+    return a * (1 - t) + b * t;
+  };
+}
+
+function object(a, b) {
+  var i = {},
+      c = {},
+      k;
+
+  if (a === null || typeof a !== "object") a = {};
+  if (b === null || typeof b !== "object") b = {};
+
+  for (k in b) {
+    if (k in a) {
+      i[k] = interpolate(a[k], b[k]);
+    } else {
+      c[k] = b[k];
+    }
+  }
+
+  return function(t) {
+    for (k in i) c[k] = i[k](t);
+    return c;
+  };
+}
+
+var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
+    reB = new RegExp(reA.source, "g");
+
+function zero(b) {
+  return function() {
+    return b;
+  };
+}
+
+function one(b) {
+  return function(t) {
+    return b(t) + "";
+  };
+}
+
+function string(a, b) {
+  var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
+      am, // current match in a
+      bm, // current match in b
+      bs, // string preceding current number in b, if any
+      i = -1, // index in s
+      s = [], // string constants and placeholders
+      q = []; // number interpolators
+
+  // Coerce inputs to strings.
+  a = a + "", b = b + "";
+
+  // Interpolate pairs of numbers in a & b.
+  while ((am = reA.exec(a))
+      && (bm = reB.exec(b))) {
+    if ((bs = bm.index) > bi) { // a string precedes the next number in b
+      bs = b.slice(bi, bs);
+      if (s[i]) s[i] += bs; // coalesce with previous string
+      else s[++i] = bs;
+    }
+    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
+      if (s[i]) s[i] += bm; // coalesce with previous string
+      else s[++i] = bm;
+    } else { // interpolate non-matching numbers
+      s[++i] = null;
+      q.push({i: i, x: interpolateNumber(am, bm)});
+    }
+    bi = reB.lastIndex;
+  }
+
+  // Add remains of b.
+  if (bi < b.length) {
+    bs = b.slice(bi);
+    if (s[i]) s[i] += bs; // coalesce with previous string
+    else s[++i] = bs;
+  }
+
+  // Special optimization for only a single match.
+  // Otherwise, interpolate each of the numbers and rejoin the string.
+  return s.length < 2 ? (q[0]
+      ? one(q[0].x)
+      : zero(b))
+      : (b = q.length, function(t) {
+          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
+          return s.join("");
+        });
+}
+
+function interpolate(a, b) {
+  var t = typeof b, c;
+  return b == null || t === "boolean" ? constant(b)
+      : (t === "number" ? interpolateNumber
+      : t === "string" ? ((c = color(b)) ? (b = c, rgb) : string)
+      : b instanceof color ? rgb
+      : b instanceof Date ? date
+      : isNumberArray(b) ? numberArray
+      : Array.isArray(b) ? genericArray
+      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
+      : interpolateNumber)(a, b);
+}
+
+function interpolateRound(a, b) {
+  return a = +a, b = +b, function(t) {
+    return Math.round(a * (1 - t) + b * t);
+  };
+}
+
+function constants(x) {
+  return function() {
+    return x;
+  };
+}
+
+function number(x) {
+  return +x;
+}
+
+var unit = [0, 1];
+
+function identity$1(x) {
+  return x;
+}
+
+function normalize(a, b) {
+  return (b -= (a = +a))
+      ? function(x) { return (x - a) / b; }
+      : constants(isNaN(b) ? NaN : 0.5);
+}
+
+function clamper(a, b) {
+  var t;
+  if (a > b) t = a, a = b, b = t;
+  return function(x) { return Math.max(a, Math.min(b, x)); };
+}
+
+// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
+// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
+function bimap(domain, range, interpolate) {
+  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
+  if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
+  else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
+  return function(x) { return r0(d0(x)); };
+}
+
+function polymap(domain, range, interpolate) {
+  var j = Math.min(domain.length, range.length) - 1,
+      d = new Array(j),
+      r = new Array(j),
+      i = -1;
+
+  // Reverse descending domains.
+  if (domain[j] < domain[0]) {
+    domain = domain.slice().reverse();
+    range = range.slice().reverse();
+  }
+
+  while (++i < j) {
+    d[i] = normalize(domain[i], domain[i + 1]);
+    r[i] = interpolate(range[i], range[i + 1]);
+  }
+
+  return function(x) {
+    var i = bisectRight(domain, x, 1, j) - 1;
+    return r[i](d[i](x));
+  };
+}
+
+function copy(source, target) {
+  return target
+      .domain(source.domain())
+      .range(source.range())
+      .interpolate(source.interpolate())
+      .clamp(source.clamp())
+      .unknown(source.unknown());
+}
+
+function transformer() {
+  var domain = unit,
+      range = unit,
+      interpolate$1 = interpolate,
+      transform,
+      untransform,
+      unknown,
+      clamp = identity$1,
+      piecewise,
+      output,
+      input;
+
+  function rescale() {
+    var n = Math.min(domain.length, range.length);
+    if (clamp !== identity$1) clamp = clamper(domain[0], domain[n - 1]);
+    piecewise = n > 2 ? polymap : bimap;
+    output = input = null;
+    return scale;
+  }
+
+  function scale(x) {
+    return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1)))(transform(clamp(x)));
+  }
+
+  scale.invert = function(y) {
+    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
+  };
+
+  scale.domain = function(_) {
+    return arguments.length ? (domain = Array.from(_, number), rescale()) : domain.slice();
+  };
+
+  scale.range = function(_) {
+    return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
+  };
+
+  scale.rangeRound = function(_) {
+    return range = Array.from(_), interpolate$1 = interpolateRound, rescale();
+  };
+
+  scale.clamp = function(_) {
+    return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1;
+  };
+
+  scale.interpolate = function(_) {
+    return arguments.length ? (interpolate$1 = _, rescale()) : interpolate$1;
+  };
+
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : unknown;
+  };
+
+  return function(t, u) {
+    transform = t, untransform = u;
+    return rescale();
+  };
+}
+
+function continuous() {
+  return transformer()(identity$1, identity$1);
+}
+
+function formatDecimal(x) {
+  return Math.abs(x = Math.round(x)) >= 1e21
+      ? x.toLocaleString("en").replace(/,/g, "")
+      : x.toString(10);
+}
+
+// Computes the decimal coefficient and exponent of the specified number x with
+// significant digits p, where x is positive and p is in [1, 21] or undefined.
+// For example, formatDecimalParts(1.23) returns ["123", 0].
+function formatDecimalParts(x, p) {
+  if (!isFinite(x) || x === 0) return null; // NaN, ±Infinity, ±0
+  var i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e"), coefficient = x.slice(0, i);
+
+  // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
+  // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
+  return [
+    coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
+    +x.slice(i + 1)
+  ];
+}
+
+function exponent(x) {
+  return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
+}
+
+function formatGroup(grouping, thousands) {
+  return function(value, width) {
+    var i = value.length,
+        t = [],
+        j = 0,
+        g = grouping[0],
+        length = 0;
+
+    while (i > 0 && g > 0) {
+      if (length + g + 1 > width) g = Math.max(1, width - length);
+      t.push(value.substring(i -= g, i + g));
+      if ((length += g + 1) > width) break;
+      g = grouping[j = (j + 1) % grouping.length];
+    }
+
+    return t.reverse().join(thousands);
+  };
+}
+
+function formatNumerals(numerals) {
+  return function(value) {
+    return value.replace(/[0-9]/g, function(i) {
+      return numerals[+i];
+    });
+  };
+}
+
+// [[fill]align][sign][symbol][0][width][,][.precision][~][type]
+var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
+
+function formatSpecifier(specifier) {
+  if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
+  var match;
+  return new FormatSpecifier({
+    fill: match[1],
+    align: match[2],
+    sign: match[3],
+    symbol: match[4],
+    zero: match[5],
+    width: match[6],
+    comma: match[7],
+    precision: match[8] && match[8].slice(1),
+    trim: match[9],
+    type: match[10]
+  });
+}
+
+formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
+
+function FormatSpecifier(specifier) {
+  this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
+  this.align = specifier.align === undefined ? ">" : specifier.align + "";
+  this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
+  this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
+  this.zero = !!specifier.zero;
+  this.width = specifier.width === undefined ? undefined : +specifier.width;
+  this.comma = !!specifier.comma;
+  this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
+  this.trim = !!specifier.trim;
+  this.type = specifier.type === undefined ? "" : specifier.type + "";
+}
+
+FormatSpecifier.prototype.toString = function() {
+  return this.fill
+      + this.align
+      + this.sign
+      + this.symbol
+      + (this.zero ? "0" : "")
+      + (this.width === undefined ? "" : Math.max(1, this.width | 0))
+      + (this.comma ? "," : "")
+      + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
+      + (this.trim ? "~" : "")
+      + this.type;
+};
+
+// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
+function formatTrim(s) {
+  out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
+    switch (s[i]) {
+      case ".": i0 = i1 = i; break;
+      case "0": if (i0 === 0) i0 = i; i1 = i; break;
+      default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
+    }
+  }
+  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
+}
+
+var prefixExponent;
+
+function formatPrefixAuto(x, p) {
+  var d = formatDecimalParts(x, p);
+  if (!d) return prefixExponent = undefined, x.toPrecision(p);
+  var coefficient = d[0],
+      exponent = d[1],
+      i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
+      n = coefficient.length;
+  return i === n ? coefficient
+      : i > n ? coefficient + new Array(i - n + 1).join("0")
+      : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
+      : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
+}
+
+function formatRounded(x, p) {
+  var d = formatDecimalParts(x, p);
+  if (!d) return x + "";
+  var coefficient = d[0],
+      exponent = d[1];
+  return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
+      : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
+      : coefficient + new Array(exponent - coefficient.length + 2).join("0");
+}
+
+var formatTypes = {
+  "%": (x, p) => (x * 100).toFixed(p),
+  "b": (x) => Math.round(x).toString(2),
+  "c": (x) => x + "",
+  "d": formatDecimal,
+  "e": (x, p) => x.toExponential(p),
+  "f": (x, p) => x.toFixed(p),
+  "g": (x, p) => x.toPrecision(p),
+  "o": (x) => Math.round(x).toString(8),
+  "p": (x, p) => formatRounded(x * 100, p),
+  "r": formatRounded,
+  "s": formatPrefixAuto,
+  "X": (x) => Math.round(x).toString(16).toUpperCase(),
+  "x": (x) => Math.round(x).toString(16)
+};
+
+function identity(x) {
+  return x;
+}
+
+var map = Array.prototype.map,
+    prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
+
+function formatLocale(locale) {
+  var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
+      currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
+      currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
+      decimal = locale.decimal === undefined ? "." : locale.decimal + "",
+      numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),
+      percent = locale.percent === undefined ? "%" : locale.percent + "",
+      minus = locale.minus === undefined ? "−" : locale.minus + "",
+      nan = locale.nan === undefined ? "NaN" : locale.nan + "";
+
+  function newFormat(specifier, options) {
+    specifier = formatSpecifier(specifier);
+
+    var fill = specifier.fill,
+        align = specifier.align,
+        sign = specifier.sign,
+        symbol = specifier.symbol,
+        zero = specifier.zero,
+        width = specifier.width,
+        comma = specifier.comma,
+        precision = specifier.precision,
+        trim = specifier.trim,
+        type = specifier.type;
+
+    // The "n" type is an alias for ",g".
+    if (type === "n") comma = true, type = "g";
+
+    // The "" type, and any invalid type, is an alias for ".12~g".
+    else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
+
+    // If zero fill is specified, padding goes after sign and before digits.
+    if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
+
+    // Compute the prefix and suffix.
+    // For SI-prefix, the suffix is lazily computed.
+    var prefix = (options && options.prefix !== undefined ? options.prefix : "") + (symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : ""),
+        suffix = (symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "") + (options && options.suffix !== undefined ? options.suffix : "");
+
+    // What format function should we use?
+    // Is this an integer type?
+    // Can this type generate exponential notation?
+    var formatType = formatTypes[type],
+        maybeSuffix = /[defgprs%]/.test(type);
+
+    // Set the default precision if not specified,
+    // or clamp the specified precision to the supported range.
+    // For significant precision, it must be in [1, 21].
+    // For fixed precision, it must be in [0, 20].
+    precision = precision === undefined ? 6
+        : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
+        : Math.max(0, Math.min(20, precision));
+
+    function format(value) {
+      var valuePrefix = prefix,
+          valueSuffix = suffix,
+          i, n, c;
+
+      if (type === "c") {
+        valueSuffix = formatType(value) + valueSuffix;
+        value = "";
+      } else {
+        value = +value;
+
+        // Determine the sign. -0 is not less than 0, but 1 / -0 is!
+        var valueNegative = value < 0 || 1 / value < 0;
+
+        // Perform the initial formatting.
+        value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
+
+        // Trim insignificant zeros.
+        if (trim) value = formatTrim(value);
+
+        // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
+        if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
+
+        // Compute the prefix and suffix.
+        valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
+        valueSuffix = (type === "s" && !isNaN(value) && prefixExponent !== undefined ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
+
+        // Break the formatted value into the integer “value” part that can be
+        // grouped, and fractional or exponential “suffix” part that is not.
+        if (maybeSuffix) {
+          i = -1, n = value.length;
+          while (++i < n) {
+            if (c = value.charCodeAt(i), 48 > c || c > 57) {
+              valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
+              value = value.slice(0, i);
+              break;
+            }
+          }
+        }
+      }
+
+      // If the fill character is not "0", grouping is applied before padding.
+      if (comma && !zero) value = group(value, Infinity);
+
+      // Compute the padding.
+      var length = valuePrefix.length + value.length + valueSuffix.length,
+          padding = length < width ? new Array(width - length + 1).join(fill) : "";
+
+      // If the fill character is "0", grouping is applied after padding.
+      if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
+
+      // Reconstruct the final output based on the desired alignment.
+      switch (align) {
+        case "<": value = valuePrefix + value + valueSuffix + padding; break;
+        case "=": value = valuePrefix + padding + value + valueSuffix; break;
+        case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
+        default: value = padding + valuePrefix + value + valueSuffix; break;
+      }
+
+      return numerals(value);
+    }
+
+    format.toString = function() {
+      return specifier + "";
+    };
+
+    return format;
+  }
+
+  function formatPrefix(specifier, value) {
+    var e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
+        k = Math.pow(10, -e),
+        f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier), {suffix: prefixes[8 + e / 3]});
+    return function(value) {
+      return f(k * value);
+    };
+  }
+
+  return {
+    format: newFormat,
+    formatPrefix: formatPrefix
+  };
+}
+
+var locale;
+var format;
+var formatPrefix;
+
+defaultLocale({
+  thousands: ",",
+  grouping: [3],
+  currency: ["$", ""]
+});
+
+function defaultLocale(definition) {
+  locale = formatLocale(definition);
+  format = locale.format;
+  formatPrefix = locale.formatPrefix;
+  return locale;
+}
+
+function precisionFixed(step) {
+  return Math.max(0, -exponent(Math.abs(step)));
+}
+
+function precisionPrefix(step, value) {
+  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
+}
+
+function precisionRound(step, max) {
+  step = Math.abs(step), max = Math.abs(max) - step;
+  return Math.max(0, exponent(max) - exponent(step)) + 1;
+}
+
+function tickFormat(start, stop, count, specifier) {
+  var step = tickStep(start, stop, count),
+      precision;
+  specifier = formatSpecifier(specifier == null ? ",f" : specifier);
+  switch (specifier.type) {
+    case "s": {
+      var value = Math.max(Math.abs(start), Math.abs(stop));
+      if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
+      return formatPrefix(specifier, value);
+    }
+    case "":
+    case "e":
+    case "g":
+    case "p":
+    case "r": {
+      if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
+      break;
+    }
+    case "f":
+    case "%": {
+      if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
+      break;
+    }
+  }
+  return format(specifier);
+}
+
+function linearish(scale) {
+  var domain = scale.domain;
+
+  scale.ticks = function(count) {
+    var d = domain();
+    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
+  };
+
+  scale.tickFormat = function(count, specifier) {
+    var d = domain();
+    return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
+  };
+
+  scale.nice = function(count) {
+    if (count == null) count = 10;
+
+    var d = domain();
+    var i0 = 0;
+    var i1 = d.length - 1;
+    var start = d[i0];
+    var stop = d[i1];
+    var prestep;
+    var step;
+    var maxIter = 10;
+
+    if (stop < start) {
+      step = start, start = stop, stop = step;
+      step = i0, i0 = i1, i1 = step;
+    }
+    
+    while (maxIter-- > 0) {
+      step = tickIncrement(start, stop, count);
+      if (step === prestep) {
+        d[i0] = start;
+        d[i1] = stop;
+        return domain(d);
+      } else if (step > 0) {
+        start = Math.floor(start / step) * step;
+        stop = Math.ceil(stop / step) * step;
+      } else if (step < 0) {
+        start = Math.ceil(start * step) / step;
+        stop = Math.floor(stop * step) / step;
+      } else {
+        break;
+      }
+      prestep = step;
+    }
+
+    return scale;
+  };
+
+  return scale;
+}
+
+function linear() {
+  var scale = continuous();
+
+  scale.copy = function() {
+    return copy(scale, linear());
+  };
+
+  initRange.apply(scale, arguments);
+
+  return linearish(scale);
+}
+
+function transformPow(exponent) {
+  return function(x) {
+    return x < 0 ? -Math.pow(-x, exponent) : Math.pow(x, exponent);
+  };
+}
+
+function transformSqrt(x) {
+  return x < 0 ? -Math.sqrt(-x) : Math.sqrt(x);
+}
+
+function transformSquare(x) {
+  return x < 0 ? -x * x : x * x;
+}
+
+function powish(transform) {
+  var scale = transform(identity$1, identity$1),
+      exponent = 1;
+
+  function rescale() {
+    return exponent === 1 ? transform(identity$1, identity$1)
+        : exponent === 0.5 ? transform(transformSqrt, transformSquare)
+        : transform(transformPow(exponent), transformPow(1 / exponent));
+  }
+
+  scale.exponent = function(_) {
+    return arguments.length ? (exponent = +_, rescale()) : exponent;
+  };
+
+  return linearish(scale);
+}
+
+function pow() {
+  var scale = powish(transformer());
+
+  scale.copy = function() {
+    return copy(scale, pow()).exponent(scale.exponent());
+  };
+
+  initRange.apply(scale, arguments);
+
+  return scale;
+}
+
+function sqrt() {
+  return pow.apply(null, arguments).exponent(0.5);
+}
+
+const BAR_SCALES = ["log", "sqrt", "linear"];
+
+/**
+ * Bar-length scale for the count histogram: mass -> pixel length.
+ *
+ * The default is LOG, and that is not a stylistic choice. Real hierarchies of
+ * this kind have pathological count distributions — a photo library where one
+ * "Unknown date" bucket holds 113,656 of 114,125 photos is a true story. Under a
+ * linear scale every other bar is the 4px minimum; under sqrt, a busy 300-photo
+ * day still renders at 5% of the track. Both turn the histogram into a row of
+ * identical stubs that encode nothing. `log1p(300)/log1p(113656) = 49%` — the
+ * silhouette comes back.
+ *
+ * Use `linear` when the counts are known to be well-behaved and you want the
+ * bars to be honestly proportional.
+ *
+ * @param {number} maxCount
+ * @param {number} maxLenPx
+ * @param {{minLenPx?: number, type?: "log"|"sqrt"|"linear"}} [opts]
+ * @returns {(count: number) => number}
+ */
+function makeBarScale(maxCount, maxLenPx, opts = {}) {
+  const { minLenPx = 4, type = "log" } = opts;
+  const hi = Math.max(1, maxCount);
+
+  if (type === "log") {
+    // log1p, not scaleLog: the domain starts at 0 (an empty group is legal) and
+    // log(0) is -Infinity.
+    const denom = Math.log1p(hi);
+    return (count) => {
+      const c = Math.max(0, Math.min(count, hi));
+      const t = denom > 0 ? Math.log1p(c) / denom : 0;
+      return minLenPx + (maxLenPx - minLenPx) * t;
+    };
+  }
+
+  const scale = type === "linear" ? linear() : sqrt();
+  return scale.domain([0, hi]).range([minLenPx, maxLenPx]).clamp(true);
+}
+
+/**
+ * The layout: one signature, three named strategies, ONE row contract.
+ *
+ * The strategies are not three algorithms — they are three cells of a 2x2 over
+ * two independent stages, `selection` x `positioning`:
+ *
+ *                | uniform positions | fisheye positions
+ *   -------------+-------------------+-------------------
+ *   all leaves   | "uniform"         | "fisheye"
+ *   DOI-selected | "doi"             | "hybrid"
+ *
+ * Everything downstream (bands, renderers, tests) is shared, so adding a fourth
+ * strategy means adding a selector or a positioner, never a new pipeline.
+ *
+ * Note what this dissolves: AutoGallery's old `positioning: "rank" | "proportional"`
+ * knob existed only because decimation squashed the near-focus leaves into a
+ * sub-pixel sliver. Here, "fisheye" never decimates (so rank IS proportional),
+ * and "hybrid" magnifies over DOI-selected slots (so rank is simply correct).
+ * The knob has no reason to exist.
+ */
+
+
+const LAYOUTS = ["fisheye", "doi", "hybrid", "uniform"];
+
+const LAYOUT_DEFAULTS = {
+  /** Fisheye strength. Higher = gentler. (Ported knob; same meaning as before.) */
+  distortion: 4,
+  /** Top/bottom inset, px. */
+  pad: 6,
+  /** Target minimum row height — sets the DOI row budget. */
+  minRowPx: 16,
+  /** What a band's HEIGHT encodes.
+   *  "slots" — every visible group gets equal room, so height reads as INTEREST.
+   *  "count" — height is proportional to photo mass, so a 40k-photo year visibly
+   *            dwarfs a 400-photo one. A true value-encoded partition diagram. */
+  sizeBy: "slots",
+  /** Under `sizeBy: "count"`, the fraction of the column split EQUALLY before the
+   * rest is divided by mass. Without it, a zero-count group gets a zero-height
+   * band: invisible and impossible to click. 1 collapses back to "slots", so the
+   * two modes are the ends of one continuum. */
+  sizeFloor: 0.25,
+  /** DOI: penalty for sitting at a different level than the focus. */
+  apiWeight: 0.5,
+  /** DOI: how fast interest falls off with distance from the focus. */
+  distanceWeight: 1,
+  /** DOI: 0 = distance measured purely along the leaf axis (a clean readable
+   * window, blind to structure); 1 = purely tree distance (keeps the focus's
+   * siblings and cousins, but scatters survivors down the column). */
+  treeWeight: 0.6,
+  /** DOI: how much photo mass earns a row. A weak tiebreaker by design — turn it
+   * up and the lens becomes a popularity chart instead of a "where am I". */
+  countWeight: 0.25,
+};
+
+/**
+ * @param {any} root  a decorated hierarchy (see hierarchy.js `normalize`)
+ * @param {object} options
+ * @param {number} options.height
+ * @param {"fisheye"|"doi"|"hybrid"|"uniform"} [options.layout="fisheye"]
+ * @param {{leaf?: number, px?: number}} [options.focus]  focus by leaf index, or
+ *   pinned to a cursor pixel. Pixel wins when both are given — that is what keeps
+ *   the magnified row exactly under the pointer.
+ * @returns {{rows: any[], maxCount: number, focusLeaf: number, focusPx: number,
+ *            slots: number, leaves: number}}
+ */
+function layout(root, options = {}) {
+  const o = { ...LAYOUT_DEFAULTS, ...options };
+  const height = o.height ?? 0;
+  const leaves = leavesOf(root);
+  const n = leaves.length;
+
+  const min = o.pad;
+  const max = height - o.pad;
+  if (!n || max <= min) {
+    return {
+      rows: [],
+      maxCount: 0,
+      focusLeaf: 0,
+      focusPx: min,
+      slots: 0,
+      leaves: n,
+    };
+  }
+
+  const strategy = LAYOUTS.includes(o.layout) ? o.layout : "fisheye";
+  const usesDOI = strategy === "doi" || strategy === "hybrid";
+  const usesFisheye = strategy === "fisheye" || strategy === "hybrid";
+
+  const sizeBy = SIZE_BY.includes(o.sizeBy) ? o.sizeBy : "slots";
+  const sizing = { min, max, sizeBy, sizeFloor: o.sizeFloor };
+
+  const budget = Math.max(4, Math.floor((max - min) / o.minRowPx));
+
+  // Which leaf is the focus? Under DOI this looks circular — the slot axis exists
+  // only once DOI has run, DOI needs a focus leaf, and the focus leaf is whatever
+  // sits under the cursor — but it isn't, as long as the caller says which ROW it
+  // is pointing at. The widget reads that off the frame it just drew (only it can:
+  // a pixel means whatever was last painted there, and this function is pure), and
+  // one pass resolves everything:
+  //
+  //   seed leaf -> DOI selects the slots -> the slot at the cursor is the focus.
+  //
+  // The old code had no seed, so it mapped the cursor pixel onto the WHOLE-LEAF
+  // axis instead. On a real library that is about one leaf per pixel, while the
+  // rows on screen are the ~35 DOI slots at ~16px apart — so one row of mouse
+  // travel moved the focus by ~30 leaves. You could not hover from 06 Feb to
+  // 07 Feb; it jumped straight to 06 Mar.
+  //
+  // Resist the urge to iterate this to a fixed point (focus the slot under the
+  // cursor, re-select, repeat). It converges, and it is worse: pointing just past
+  // the last open day lands on the collapsed month below, and the chase then
+  // re-centres INSIDE it — 27 Jan jumps to 27 Feb. One pass steps into the month
+  // and lets the next hover open it.
+  const px = o.focus?.px != null ? clamp(o.focus.px, min, max) : null;
+  const seed =
+    o.focus?.leaf != null
+      ? clamp(o.focus.leaf, 0, n - 1)
+      : px != null
+        ? // No seed (the first frame, before anything has been drawn). The leaf
+          // axis is the only axis there is; it is a rough guess, and the very next
+          // pointermove replaces it with the real row.
+          resolveFocus({ px }, basePositions(leaves, sizing)).slot
+        : 0;
+
+  const slots = usesDOI
+    ? selectDOI(root, { ...o, budget, focusLeaf: seed })
+    : selectAll(root);
+  const S = slots.length;
+  const basePos = basePositions(slots, sizing);
+
+  // The row under the cursor. Safe to read off the BASE axis: the fisheye pins
+  // `px` as a fixed point, so the slot whose base band contains it is exactly the
+  // slot whose DRAWN band contains it — which is what makes the row you click the
+  // row you pointed at.
+  const focusSlot =
+    px != null ? slotAtPixel(basePos, px) : slotOfLeaf(slots, seed);
+  const focusLeaf = px != null ? slots[focusSlot].leafStart : seed;
+  const focus = {
+    px: px ?? (basePos[focusSlot] + basePos[focusSlot + 1]) / 2,
+    slot: focusSlot,
+  };
+
+  // The lens distorts whatever base it is handed — equal spans or mass-weighted.
+  // It only needs monotonicity, which both give it.
+  const pos = usesFisheye
+    ? distort(basePos, { focusPx: focus.px, distortion: o.distortion })
+    : basePos;
+
+  const { rows, maxCount } = buildRows(root, slots, pos, {
+    focusSlot: focus.slot,
+  });
+
+  return {
+    rows,
+    maxCount,
+    focusLeaf,
+    focusPx: focus.px,
+    focusSlot: focus.slot,
+    slots: S,
+    leaves: n,
+  };
+}
+
+/** Which slot holds a given leaf. Slots are ordered, so binary search. */
+function slotOfLeaf(slots, leaf) {
+  let lo = 0;
+  let hi = slots.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (slots[mid].leafEnd <= leaf) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+
+/**
+ * One stylesheet, injected once. Everything is expressed as a CSS custom
+ * property on `.fisheye-nav`, so a host restyles the widget without a build step
+ * and without the widget knowing anything about the host's design system.
+ *
+ * Colors are derived from a single hue + the host's text color, and the widget
+ * inherits `color-scheme`, so it lands correctly in a light or a dark app
+ * without being told which it is in.
+ */
+const CSS = `
+.fisheye-nav {
+  --fn-accent: #3b82f6;
+  --fn-fg: currentColor;
+  --fn-muted: color-mix(in oklab, currentColor 55%, transparent);
+  --fn-band: color-mix(in oklab, currentColor 8%, transparent);
+  --fn-band-hover: color-mix(in oklab, currentColor 16%, transparent);
+  --fn-rule: color-mix(in oklab, currentColor 18%, transparent);
+  --fn-bar: color-mix(in oklab, var(--fn-accent) 45%, transparent);
+  --fn-font: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --fn-size: 11px;
+
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-family: var(--fn-font);
+  font-size: var(--fn-size);
+  color: var(--fn-fg);
+  user-select: none;
+}
+.fisheye-nav svg { display: block; width: 100%; height: 100%; overflow: hidden; }
+.fisheye-nav .fn-row { cursor: pointer; }
+.fisheye-nav .fn-band {
+  fill: var(--fn-band);
+  stroke: var(--fn-rule);
+  stroke-width: 0.5;
+  shape-rendering: crispEdges;
+}
+.fisheye-nav .fn-row:hover .fn-band { fill: var(--fn-band-hover); }
+.fisheye-nav .fn-row[data-kind="branch"] .fn-band { fill: color-mix(in oklab, currentColor 4%, transparent); }
+.fisheye-nav .fn-row[data-kind="elision"] .fn-band { fill: none; stroke-dasharray: 2 2; }
+.fisheye-nav .fn-row[data-focused="true"] .fn-band {
+  fill: color-mix(in oklab, var(--fn-accent) 22%, transparent);
+  stroke: var(--fn-accent);
+  stroke-width: 1;
+}
+.fisheye-nav .fn-selected .fn-band {
+  stroke: var(--fn-accent);
+  stroke-width: 1.5;
+}
+.fisheye-nav .fn-bar { fill: var(--fn-bar); }
+.fisheye-nav .fn-label {
+  fill: var(--fn-fg);
+  dominant-baseline: middle;
+  pointer-events: none;
+  white-space: pre;
+}
+.fisheye-nav .fn-row[data-kind="branch"] .fn-label,
+.fisheye-nav .fn-row[data-kind="elision"] .fn-label { fill: var(--fn-muted); }
+.fisheye-nav .fn-count { fill: var(--fn-muted); text-anchor: end; dominant-baseline: middle; pointer-events: none; }
+.fisheye-nav .fn-spine { fill: var(--fn-rule); }
+.fisheye-nav .fn-empty { fill: var(--fn-muted); text-anchor: middle; }
+
+/* ── Settings gear + popover (opt out with controls: false) ──────────────────
+   Neutral defaults driven by the same --fn-* variables as the chart, so a host
+   restyles the panel without patching the library. */
+.fisheye-nav .fn-gear {
+  position: absolute; top: 2px; right: 4px; z-index: 6;
+  width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px;
+  background: transparent; color: var(--fn-muted);
+  font-size: 12px; line-height: 18px; cursor: pointer;
+}
+.fisheye-nav .fn-gear:hover,
+.fisheye-nav .fn-gear.on { color: var(--fn-fg); background: var(--fn-band-hover); }
+/* Visibility is driven by the .fn-open CLASS, not by the hidden attribute: the
+   UA's "[hidden] { display: none }" is a single-attribute selector, so any rule
+   here that sets display outranks it and setting .hidden silently does nothing.
+   (It did exactly that — every popover in the demo rendered open.) The hidden
+   attribute is still kept in sync, for assistive tech.
+   NB: no backticks in this comment — the whole stylesheet is a JS template
+   literal, and a backtick here would terminate it. */
+/* The popover is the ONE place the widget paints its own background, so it is
+   the one place "inherit the host's color" stops working: an inherited
+   foreground over a system background is a coin toss (a dark app's near-white
+   text landed on Canvas-white and vanished). Background and foreground must
+   come from the same place — so they are a system PAIR by default, and a host
+   overriding one is expected to override the other. color-scheme makes the
+   pair, and the native selects and sliders inside, follow the host's theme. */
+.fisheye-nav .fn-panel {
+  position: absolute; top: 22px; right: 4px; z-index: 7;
+  width: 220px; padding: 8px; display: none; flex-direction: column; gap: 6px;
+  color-scheme: var(--fn-scheme, light dark);
+  background: var(--fn-panel, Canvas);
+  color: var(--fn-panel-fg, CanvasText);
+  border: 1px solid var(--fn-rule); border-radius: 6px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
+}
+.fisheye-nav .fn-panel.fn-open { display: flex; }
+.fisheye-nav .fn-row-ctl { display: flex; align-items: center; gap: 6px; }
+.fisheye-nav .fn-ctl-label { flex: 0 0 76px; opacity: 0.75; }
+.fisheye-nav .fn-ctl-select {
+  flex: 1; min-width: 0; font: inherit; padding: 2px 4px;
+  color: inherit; background: transparent;
+  border: 1px solid var(--fn-rule); border-radius: 4px;
+}
+.fisheye-nav .fn-ctl-slider { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
+.fisheye-nav .fn-ctl-slider input { flex: 1; min-width: 0; accent-color: var(--fn-accent); }
+.fisheye-nav .fn-ctl-val {
+  flex: 0 0 30px; text-align: right; opacity: 0.6;
+  font-variant-numeric: tabular-nums;
+}
+.fisheye-nav .fn-ctl-more summary { cursor: pointer; opacity: 0.75; margin-bottom: 4px; }
+.fisheye-nav .fn-ctl-more[open] { border-top: 1px solid var(--fn-rule); padding-top: 6px; }
+.fisheye-nav .fn-ctl-reset {
+  align-self: flex-start; font: inherit; padding: 2px 8px; cursor: pointer;
+  color: inherit; background: transparent;
+  border: 1px solid var(--fn-rule); border-radius: 4px;
+}
+/* A control that cannot affect the current lens says so, rather than silently
+   doing nothing when dragged. */
+.fisheye-nav .fn-disabled { opacity: 0.4; }
+`;
+
+let injected = false;
+
+function injectStyle(doc = globalThis.document) {
+  if (injected || !doc?.head) return;
+  const el = doc.createElement("style");
+  el.setAttribute("data-fisheye-nav", "");
+  el.textContent = CSS;
+  doc.head.appendChild(el);
+  injected = true;
+}
+
+/**
+ * The renderers. Both consume the SAME rows, so neither knows (or can know)
+ * which layout strategy produced them — that is what keeps `style` and `layout`
+ * genuinely orthogonal instead of a 6-way switch.
+ *
+ *   flat    one column, indented by depth. Internal nodes get a real row (their
+ *           synthetic header cell), so "what level am I on" is answerable at a
+ *           glance. This is an outline.
+ *   icicle  one column per depth; a node's band is its children's span. This is
+ *           a partition diagram whose vertical axis happens to be fisheyed.
+ */
+
+
+const STYLES = ["flat", "icicle"];
+
+const RENDER_DEFAULTS = {
+  /** px of indent per level (flat). */
+  indent: 11,
+  /** Draw the count histogram INSIDE each band (the row is the bar's track, the
+   * label sits on top). False hides it. */
+  bars: true,
+  /** px of clear space kept at the right edge. */
+  gutter: 6,
+  /** don't draw a label in a band thinner than this — it would just be noise. */
+  minLabelPx: 9,
+  /** count-histogram scale. Log by default — see scales.js for why. */
+  barScale: "log",
+  /** count formatter for the histogram tooltip/label. */
+  format: (n) => n.toLocaleString(),
+};
+
+/**
+ * @param {SVGElement} svg
+ * @param {{rows: any[], maxCount: number}} model  a `layout()` result
+ * @param {object} opts  width, height, style, selectedId, + RENDER_DEFAULTS
+ */
+function render(svg, model, opts) {
+  const o = { ...RENDER_DEFAULTS, ...opts };
+  injectStyle(svg.ownerDocument);
+
+  const root = select(svg);
+  const { rows, maxCount } = model;
+  const { width, height, style } = o;
+
+  root.attr("viewBox", `0 0 ${width} ${height}`);
+
+  if (!rows.length) {
+    root.selectAll(".fn-row").remove();
+    root
+      .selectAll(".fn-empty")
+      .data([0])
+      .join("text")
+      .attr("class", "fn-empty")
+      .attr("x", width / 2)
+      .attr("y", height / 2)
+      .text(o.emptyLabel ?? "Nothing to show");
+    return;
+  }
+  root.selectAll(".fn-empty").remove();
+
+  // The bar's track is the ROW, not a column of its own: length encodes photo
+  // mass while the band's height encodes the lens, so the column reads as a
+  // histogram silhouette (the original AutoGallery design). The label is drawn
+  // over it.
+  const trackW = width - o.gutter;
+  const maxDepth = rows.reduce((m, r) => Math.max(m, r.depth), 1);
+  const geom =
+    style === "icicle"
+      ? icicleGeom(maxDepth, trackW)
+      : flatGeom(o.indent, trackW);
+
+  // Which rows get a bar. In an icicle the inner nodes own a column of their own,
+  // so they show their AGGREGATE — the count of the whole subtree they stand for.
+  // In flat mode they don't: a branch's band spans all of its children, so a bar
+  // across it would just be a block sitting behind them.
+  const barred = (d) =>
+    o.bars &&
+    d.count > 0 &&
+    (d.terminal || (style === "icicle" && d.kind === "branch"));
+
+  // Flat: ONE scale, absolute lengths, because every row shares one track — a
+  // per-row scale would draw equal counts at different lengths depending on how
+  // deep the row sits, which is a lie. A deeper row starts further right, so its
+  // bar is clipped to its own band.
+  const flatScale = makeBarScale(maxCount, Math.max(1, trackW), {
+    type: o.barScale,
+  });
+
+  // Icicle: each depth is a column, so each depth is its OWN histogram. A year
+  // (40,000 photos) and a day (300) do not belong on one scale — shared, every
+  // year's bar pegs at full width and the column encodes nothing. So the bar is a
+  // fraction of the row's own width, taken from a scale over that depth's max.
+  const depthScale = new Map();
+  if (style === "icicle") {
+    const maxAt = new Map();
+    for (const r of rows)
+      if (barred(r))
+        maxAt.set(r.depth, Math.max(maxAt.get(r.depth) ?? 0, r.count));
+    for (const [depth, m] of maxAt)
+      depthScale.set(
+        depth,
+        makeBarScale(m, 1, { type: o.barScale, minLenPx: 0.05 }),
+      );
+  }
+
+  const barLen = (d) => {
+    if (!barred(d)) return 0;
+    const w = Math.max(0, geom.w(d));
+    return style === "icicle"
+      ? (depthScale.get(d.depth)?.(d.count) ?? 0) * w
+      : Math.min(flatScale(d.count), w);
+  };
+
+  const g = root
+    .selectAll("g.fn-row")
+    .data(rows, (d) => d.id)
+    .join((enter) => {
+      const e = enter.append("g").attr("class", "fn-row");
+      e.append("rect").attr("class", "fn-band");
+      e.append("rect").attr("class", "fn-bar");
+      e.append("text").attr("class", "fn-label");
+      e.append("title");
+      return e;
+    });
+
+  g.attr("data-kind", (d) => d.kind)
+    .attr("data-depth", (d) => d.depth)
+    .attr("data-id", (d) => d.id)
+    .attr("data-focused", (d) => (d.focused ? "true" : null))
+    .classed("fn-selected", (d) => d.id === o.selectedId);
+
+  g.select("title").text(
+    (d) =>
+      `${d.label}\n${o.format(d.count)}` +
+      (d.elided ? ` · ${d.elided} groups collapsed` : ""),
+  );
+
+  g.select("rect.fn-band")
+    .attr("x", (d) => geom.x(d))
+    .attr("y", (d) => d.y0)
+    .attr("width", (d) => Math.max(0, geom.w(d)))
+    // Hairline bands still need to be clickable; 1px floor keeps the hit target.
+    .attr("height", (d) => Math.max(1, d.thickness))
+    // Drop the border on sub-pixel bands. In the compressed tail of an
+    // undecimated fisheye, hundreds of hairline bands stack their 0.5px strokes
+    // into a solid wall that swallows both the fill and the labels — the
+    // silhouette turns into a white smear. Inline style, because a stylesheet
+    // rule would beat a presentation attribute.
+    .style("stroke-width", (d) => (d.thickness >= 2 ? 0.5 : 0));
+
+  // Same x and same height as the band it fills — so the lens magnifies the bar
+  // along with its row, and the label (drawn after) sits over it.
+  g.select("rect.fn-bar")
+    .attr("x", (d) => geom.x(d))
+    .attr("y", (d) => d.y0)
+    .attr("width", barLen)
+    .attr("height", (d) => Math.max(1, d.thickness));
+
+  g.select("text.fn-label")
+    .attr("x", (d) => geom.x(d) + 4)
+    .attr("y", (d) => d.y)
+    .attr("font-weight", (d) =>
+      d.kind === "header" || d.kind === "branch" ? 600 : 400,
+    )
+    .attr("opacity", (d) => (labelled(d, style, o) ? 1 : 0))
+    .text((d) => (labelled(d, style, o) ? labelFor(d, geom.w(d)) : ""));
+}
+
+/** flat: indent by depth, span the rest of the track. */
+const flatGeom = (indent, barX) => ({
+  x: (d) => (d.depth - 1) * indent,
+  w: (d) => barX - (d.depth - 1) * indent,
+});
+
+/**
+ * icicle: one column per level. A terminal row spans from its own column to the
+ * end of the track, so a leaf that stops short in a ragged tree still reads as a
+ * leaf rather than leaving a hole (same convention as d3's icicle).
+ */
+const icicleGeom = (maxDepth, barX) => {
+  const colW = barX / maxDepth;
+  return {
+    x: (d) => (d.depth - 1) * colW,
+    w: (d) => (d.terminal ? barX - (d.depth - 1) * colW : colW),
+  };
+};
+
+/**
+ * A branch's band spans its whole subtree, so a label centred in it would land
+ * ON TOP of its children. In flat mode the branch's synthetic header row already
+ * carries the name, so the branch itself stays silent — shading only. In icicle
+ * mode the branch owns a column of its own, so it must be labelled.
+ */
+function labelled(d, style, o) {
+  if (style !== "icicle" && d.kind === "branch") return false;
+  // The row you are ON and the row you have CHOSEN always say what they are, at
+  // any thickness. The floor exists to stop hundreds of unreadable labels piling
+  // up — it must never silence the two rows the user is actually asking about.
+  // Without this, `fisheye` (which draws every leaf, so every band is a couple of
+  // pixels) is a lens onto a column of anonymous stripes: you hover, and nothing
+  // tells you where you are.
+  if (d.focused || d.id === o.selectedId) return true;
+  return d.thickness >= o.minLabelPx;
+}
+
+function labelFor(d, w) {
+  const text = d.kind === "elision" ? `⋯ ${d.label}` : (d.label ?? "");
+  // ~6px per char at 11px system-ui; cheap and good enough to avoid measuring
+  // text in a hot path that runs on every mousemove.
+  const max = Math.max(0, Math.floor((w - 8) / 6));
+  return text.length > max ? text.slice(0, Math.max(1, max - 1)) + "…" : text;
+}
+
+/**
+ * The settings gear + popover, owned by the widget.
+ *
+ * Same contract as @john-guerra/d3-zoomable-axis's scent controls, deliberately:
+ *   controls    a ⚙ that live-tunes the lens. On by default; pass false to
+ *               suppress it and drive the options from your own UI.
+ *   persistKey  a localStorage key, so a user's tuned lens survives a reload.
+ *               Pass none and listen for the "settings" event to use your own
+ *               store instead.
+ *
+ * A consumer should not have to hand-roll this — AutoGallery did, and every
+ * other consumer would have too.
+ */
+
+
+/** What the panel tunes AND persists. Never data, accessors, or sizes. */
+const PERSIST_KEYS = [
+  "style",
+  "layout",
+  "sizeBy",
+  "distortion",
+  "minRowPx",
+  "barScale",
+  "apiWeight",
+  "distanceWeight",
+  "treeWeight",
+  "countWeight",
+];
+
+function readStore(key) {
+  if (!key || typeof localStorage === "undefined") return null;
+  try {
+    const s = JSON.parse(localStorage.getItem(key) ?? "null");
+    return s && typeof s === "object" ? s : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStore(key, obj) {
+  if (!key || typeof localStorage === "undefined") return;
+  try {
+    const picked = {};
+    for (const k of PERSIST_KEYS) if (k in obj) picked[k] = obj[k];
+    localStorage.setItem(key, JSON.stringify(picked));
+  } catch {
+    /* quota / disabled storage — persistence is best-effort */
+  }
+}
+
+/** Keep only known keys with sane values: a stale or hand-edited store must not
+ * be able to wedge the widget into an unrenderable state. */
+function sanitize(raw, defaults) {
+  const out = {};
+  if (!raw) return out;
+  const num = (v, lo, hi) => {
+    const n = Number(v);
+    return Number.isFinite(n) ? Math.min(hi, Math.max(lo, n)) : undefined;
+  };
+  const oneOf = (v, list) => (list.includes(v) ? v : undefined);
+  const put = (k, v) => {
+    if (v !== undefined) out[k] = v;
+  };
+
+  put("style", oneOf(raw.style, STYLES));
+  put("layout", oneOf(raw.layout, LAYOUTS));
+  put("sizeBy", oneOf(raw.sizeBy, SIZE_BY));
+  put("barScale", oneOf(raw.barScale, BAR_SCALES));
+  put("distortion", num(raw.distortion, 1, 12));
+  put("minRowPx", num(raw.minRowPx, 8, 48));
+  put("apiWeight", num(raw.apiWeight, 0, 3));
+  put("distanceWeight", num(raw.distanceWeight, 0, 3));
+  put("treeWeight", num(raw.treeWeight, 0, 1));
+  put("countWeight", num(raw.countWeight, 0, 2));
+  return { ...defaults, ...out };
+}
+
+const SELECTS = [
+  {
+    key: "style",
+    label: "View",
+    options: [
+      ["flat", "List (indented)"],
+      ["icicle", "Icicle (columns)"],
+    ],
+  },
+  {
+    key: "layout",
+    label: "Lens",
+    options: [
+      ["hybrid", "Hybrid — magnify + fold"],
+      ["fisheye", "Fisheye — every group"],
+      ["doi", "Interest — full rows"],
+      ["uniform", "Uniform — no lens"],
+    ],
+  },
+  {
+    key: "sizeBy",
+    label: "Band size",
+    options: [
+      ["slots", "Interest (equal)"],
+      ["count", "Photos (mass)"],
+    ],
+  },
+  {
+    key: "barScale",
+    label: "Bars",
+    options: [
+      ["log", "Log"],
+      ["sqrt", "Square root"],
+      ["linear", "Linear"],
+    ],
+  },
+];
+
+const SLIDERS = [
+  { key: "distortion", label: "Distortion", min: 1, max: 12, step: 0.5 },
+  { key: "minRowPx", label: "Row size", min: 8, max: 48, step: 1, unit: "px" },
+];
+
+// The DOI weights live behind a disclosure: they are where the lens's FEEL comes
+// from, but four extra sliders up front would bury the two knobs most people
+// actually want.
+const WEIGHTS = [
+  { key: "distanceWeight", label: "Focus falloff", min: 0, max: 3, step: 0.1 },
+  {
+    key: "treeWeight",
+    label: "Structure vs. list",
+    min: 0,
+    max: 1,
+    step: 0.05,
+  },
+  { key: "countWeight", label: "Busy groups", min: 0, max: 2, step: 0.05 },
+  { key: "apiWeight", label: "Same-level bias", min: 0, max: 3, step: 0.1 },
+];
+
+/**
+ * @param {HTMLElement} host      the widget root
+ * @param {{get:()=>object, set:(patch:object)=>void, reset:()=>void}} io
+ * @returns {{sync:()=>void, destroy:()=>void}}
+ */
+function buildControls(host, io) {
+  const doc = host.ownerDocument;
+  const el = (tag, cls, props) =>
+    Object.assign(doc.createElement(tag), { className: cls, ...props });
+
+  const gear = el("button", "fn-gear", {
+    type: "button",
+    innerHTML: "&#9881;",
+    title: "Lens settings",
+  });
+  gear.setAttribute("aria-label", "Lens settings");
+  gear.setAttribute("aria-expanded", "false");
+
+  const panel = el("div", "fn-panel");
+  panel.hidden = true;
+  panel.setAttribute("role", "group");
+  panel.setAttribute("aria-label", "Lens settings");
+
+  const inputs = new Map();
+
+  const row = (label, control) => {
+    const r = el("label", "fn-row-ctl");
+    r.appendChild(el("span", "fn-ctl-label", { textContent: label }));
+    r.appendChild(control);
+    return r;
+  };
+
+  for (const s of SELECTS) {
+    const sel = el("select", "fn-ctl-select");
+    for (const [value, text] of s.options) {
+      sel.appendChild(el("option", "", { value, textContent: text }));
+    }
+    sel.addEventListener("change", () => io.set({ [s.key]: sel.value }));
+    inputs.set(s.key, sel);
+    panel.appendChild(row(s.label, sel));
+  }
+
+  const slider = (s) => {
+    const wrap = el("span", "fn-ctl-slider");
+    const input = el("input", "", {
+      type: "range",
+      min: String(s.min),
+      max: String(s.max),
+      step: String(s.step),
+    });
+    const out = el("span", "fn-ctl-val");
+    input.addEventListener("input", () => {
+      out.textContent = input.value + (s.unit ?? "");
+      io.set({ [s.key]: Number(input.value) });
+    });
+    wrap.append(input, out);
+    inputs.set(s.key, input);
+    return { wrap, input, out, spec: s };
+  };
+
+  const sliders = [];
+  for (const s of SLIDERS) {
+    const made = slider(s);
+    sliders.push(made);
+    panel.appendChild(row(s.label, made.wrap));
+  }
+
+  const details = el("details", "fn-ctl-more");
+  details.appendChild(el("summary", "", { textContent: "Interest weights" }));
+  for (const s of WEIGHTS) {
+    const made = slider(s);
+    sliders.push(made);
+    details.appendChild(row(s.label, made.wrap));
+  }
+  panel.appendChild(details);
+
+  const reset = el("button", "fn-ctl-reset", {
+    type: "button",
+    textContent: "Reset",
+  });
+  reset.addEventListener("click", () => io.reset());
+  panel.appendChild(reset);
+
+  // `.fn-open` is what actually shows the panel — see style.js. `hidden` is kept
+  // in sync for assistive tech, but it cannot be trusted to hide anything on its
+  // own once the stylesheet sets `display`.
+  const toggle = (open = panel.hidden) => {
+    panel.hidden = !open;
+    panel.classList.toggle("fn-open", open);
+    gear.classList.toggle("on", open);
+    gear.setAttribute("aria-expanded", String(open));
+  };
+  gear.addEventListener("click", () => toggle());
+
+  // Esc closes; a click outside closes. Both are what a popover is expected to
+  // do, and neither is worth making every consumer reimplement.
+  const onKey = (e) => {
+    if (e.key === "Escape" && !panel.hidden) toggle(false);
+  };
+  const onDocClick = (e) => {
+    if (panel.hidden) return;
+    if (!panel.contains(e.target) && e.target !== gear) toggle(false);
+  };
+  host.addEventListener("keydown", onKey);
+  doc.addEventListener("click", onDocClick, true);
+
+  host.append(gear, panel);
+
+  const sync = () => {
+    const o = io.get();
+    for (const [key, input] of inputs) {
+      const v = o[key];
+      if (input.tagName === "SELECT") input.value = String(v);
+      else input.value = String(v);
+    }
+    for (const s of sliders) {
+      s.out.textContent = String(o[s.spec.key]) + (s.spec.unit ?? "");
+    }
+    // Distortion means nothing without a lens; say so rather than letting the
+    // user drag a slider that does nothing.
+    const lensed = o.layout === "fisheye" || o.layout === "hybrid";
+    const dist = inputs.get("distortion");
+    dist.disabled = !lensed;
+    dist.closest(".fn-row-ctl").classList.toggle("fn-disabled", !lensed);
+    // Likewise the interest weights only matter when DOI is doing the selecting.
+    const doi = o.layout === "doi" || o.layout === "hybrid";
+    details.classList.toggle("fn-disabled", !doi);
+    for (const w of WEIGHTS) inputs.get(w.key).disabled = !doi;
+  };
+
+  sync();
+
+  return {
+    sync,
+    destroy() {
+      host.removeEventListener("keydown", onKey);
+      doc.removeEventListener("click", onDocClick, true);
+      gear.remove();
+      panel.remove();
+    },
+  };
+}
+
+/**
+ * The widget: a reactivewidgets-style DOM node.
+ *
+ *   const nav = fisheyeNav({ data, keys: ["year","month","day"] });
+ *   nav.addEventListener("input", () => console.log(nav.value));  // the path
+ *   nav.value = [{key:"year", value:"2024"}];                     // set silently
+ *
+ * `value` is the path to whatever the user clicked, truncated at that depth:
+ * click a day and you get the full 3-level path; click the "2024" band and you
+ * get just [{key:"year", value:"2024"}]. Hover drives the LENS and never fires
+ * `input` — otherwise every mousemove would look like a selection.
+ */
+
+
+const NAV_DEFAULTS = {
+  ...LAYOUT_DEFAULTS,
+  ...RENDER_DEFAULTS,
+  style: "flat",
+  /** A ⚙ that live-tunes the lens. Pass false to drive the options yourself. */
+  controls: true,
+  /** localStorage key, so a tuned lens survives a reload. Omit and listen for
+   * the "settings" event to use your own store instead. */
+  persistKey: null,
+  // `hybrid`, not `fisheye`, is the default: pure fisheye draws every leaf, which
+  // on a real library (thousands of days) means thousands of sub-pixel bands —
+  // honest about density, unreadable as a navigator. Hybrid bounds the row count
+  // to what actually fits and stays readable at any library size. Pick `fisheye`
+  // deliberately when you want the undecimated silhouette.
+  layout: "hybrid",
+  width: null, // null = measure the container
+  height: null,
+};
+
+function fisheyeNav(options = {}) {
+  const doc = options.document ?? globalThis.document;
+  const el = doc.createElement("div");
+  el.className = "fisheye-nav";
+  injectStyle(doc);
+
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("preserveAspectRatio", "none");
+  svg.setAttribute("role", "listbox");
+  el.appendChild(svg);
+
+  // A persisted lens wins over the defaults but NOT over what the caller passed
+  // explicitly — a host pinning `style: "icicle"` in code means it, and a stale
+  // localStorage entry must not silently override it.
+  const stored = sanitize(readStore(options.persistKey), {});
+  let opts = { ...NAV_DEFAULTS, ...stored, ...options };
+  let root = null; // the normalized hierarchy
+  let model = null; // the last layout result
+  let hoverPx = null; // the pinned cursor pixel, or null when not hovering
+  // Where DOI opens its window. Moves ONLY on a click (see the click handler) —
+  // never on hover, or the rows reshuffle under the cursor. Null = follow the
+  // selection.
+  let anchorLeaf = null;
+  let size = { width: 0, height: 0 };
+  let controls = null;
+
+  // --- state derivation -----------------------------------------------------
+
+  const rebuild = () => {
+    root = normalize$1({
+      data: opts.data,
+      keys: opts.keys,
+      root: opts.root,
+      children: opts.children,
+      value: opts.value,
+      count: opts.count,
+      label: opts.label,
+      // Flat mode needs a real row per internal node to have something to indent;
+      // an icicle gives parents a column instead, so headers would be redundant.
+      headers: opts.style === "flat",
+    });
+  };
+
+  /** The leaf the current selection sits on — where the lens rests when not hovering. */
+  const selectedLeaf = () => {
+    const path = el.value;
+    if (!path?.length || !root) return 0;
+    let node = root;
+    for (const step of path) {
+      const next = (node.children ?? []).find(
+        (c) =>
+          !c.data.header &&
+          c.data.key === step.key &&
+          c.data.value === step.value,
+      );
+      if (!next) break;
+      node = next;
+    }
+    return node.leafStart ?? 0;
+  };
+
+  // `idOfPath`, not a second copy of the same join. This built the id with a
+  // SPACE while the rows built it with PATH_SEP, so any selection deeper than one
+  // level failed to match its row: selecting a day never highlighted it (and,
+  // once the label floor learned about the selection, never labelled it either).
+  const selectedId = () => {
+    const path = el.value;
+    return path?.length ? idOfPath(path) : null;
+  };
+
+  const measure = () => {
+    const w = opts.width ?? el.clientWidth;
+    const h = opts.height ?? el.clientHeight;
+    size = { width: Math.max(0, w), height: Math.max(0, h) };
+  };
+
+  const draw = () => {
+    if (!root) rebuild();
+    measure();
+    if (!size.width || !size.height) return;
+
+    model = layout(root, {
+      ...opts,
+      height: size.height,
+      // Two focuses, and keeping them apart is the whole trick: the PIXEL steers
+      // the lens, continuously; the LEAF decides which rows DOI opens, and it
+      // moves only on a click. See the pointermove and click handlers.
+      focus: { px: hoverPx ?? undefined, leaf: anchorLeaf ?? selectedLeaf() },
+    });
+
+    render(svg, model, { ...opts, ...size, selectedId: selectedId() });
+  };
+
+  // --- interaction ----------------------------------------------------------
+
+  /**
+   * HOVER MOVES THE LENS. IT DOES NOT RE-SELECT. This is load-bearing.
+   *
+   * A lens is only stable over a FIXED set of rows. DOI selection is not fixed —
+   * it is a function of the focus — so re-running it on every mousemove reshuffles
+   * the rows under the cursor and the leaf you are pointing at changes
+   * discontinuously: hovering down through January you get 27 Jan, Feb, 23 Feb,
+   * 27 Feb, Mar, and whole weeks are simply unreachable. (Plain `fisheye` selects
+   * every leaf, so its set is fixed, and it never does this.)
+   *
+   * Re-anchoring DOI on whatever the cursor touches does not fix it either: the
+   * row budget is fixed, so opening one region collapses another, and the tail
+   * oscillates — 9 more, 8 more, ... 2 more, 9 more, forever.
+   *
+   * So which rows are open changes only when the user SAYS so, by clicking. Hover
+   * magnifies what is there; a click drills in and re-opens the window around it
+   * (via `selectedLeaf`). That is the DOI-browser tradition, and it is what the
+   * original AutoGallery sidebar did — its decimated set was fixed too, which is
+   * precisely why hovering it never jumped.
+   */
+  svg.addEventListener("pointermove", (e) => {
+    hoverPx = pointer(e, svg)[1];
+    draw();
+  });
+
+  svg.addEventListener("pointerleave", () => {
+    hoverPx = null; // the lens snaps back to the selection
+    draw();
+  });
+
+  /**
+   * EVERY ITEM MUST BE SELECTABLE. The column shows ~40 rows of a library that
+   * may hold thousands of leaves, so most of them are, at any moment, folded into
+   * a closed subtree or an elision. Reaching them therefore has to be a matter of
+   * DRILLING IN — and every click must make progress toward that, or some leaves
+   * are unreachable forever.
+   *
+   * Which is why a click moves the DOI anchor INTO what was clicked, rather than
+   * relying on the selection to do it:
+   *
+   *   - a leaf, a header, a closed subtree -> select it; the window opens there.
+   *   - an ELISION (a run of closed siblings, "7 more") stands for no single node,
+   *     so there is no path to select. It used to select the elision's PARENT —
+   *     which, if the parent was already selected, changed nothing at all: click
+   *     it forever and the days inside it never open. A dead end, and a whole
+   *     region of the library you could see but never reach.
+   *
+   * So the anchor goes to the first leaf the clicked row stands for. That run
+   * always scores highest next time, so it always opens. Drill enough and any
+   * leaf gets its own row.
+   */
+  svg.addEventListener("click", (e) => {
+    const g = e.target.closest?.("g.fn-row");
+    if (!g) return;
+    const row = model?.rows.find((r) => r.id === g.getAttribute("data-id"));
+    if (!row) return;
+
+    anchorLeaf = row.leafStart; // always progress: open where you clicked
+
+    // `row.path` — NOT `row.parentNode.path`. An elision row already carries its
+    // parent's path (bands.js), and `parentNode` is a d3 hierarchy node, whose
+    // `.path` is d3's own path(target) METHOD. Reading it got a function, whose
+    // `.length` is 1 (its arity), so the emptiness guard passed and `.map` threw —
+    // killing the handler before it could redraw. The anchor moved, the screen did
+    // not, and clicking a "2 more" row did nothing at all, forever: the two years
+    // it stood for could be seen and never reached.
+    const path = row.path;
+    if (!path?.length) {
+      draw(); // an elision at the root: nothing to select, but still drill in
+      return;
+    }
+    el.setValue(path.map((p) => ({ ...p })));
+  });
+
+  // --- reactive-widget contract --------------------------------------------
+
+  const widget = ReactiveWidget(el, {
+    value: options.selected ?? null,
+    // Called on `input` AND on a silent `.value = x` set — so a host pushing the
+    // selection in gets the highlight without an event echoing back out.
+    showValue: () => draw(),
+  });
+
+  /** Merge new options and redraw. Re-normalizes only when it has to. */
+  el.update = (next = {}) => {
+    const restructure =
+      ("data" in next && next.data !== opts.data) ||
+      ("root" in next && next.root !== opts.root) ||
+      ("keys" in next && String(next.keys) !== String(opts.keys)) ||
+      ("style" in next && next.style !== opts.style); // headers on/off
+    opts = { ...opts, ...next };
+    if (!STYLES.includes(opts.style)) opts.style = "flat";
+    if (restructure) rebuild();
+    controls?.sync();
+    draw();
+  };
+
+  // --- settings -------------------------------------------------------------
+
+  /** Apply a settings change: persist it, tell the host, redraw. */
+  const applySettings = (patch) => {
+    el.update(patch);
+    writeStore(opts.persistKey, opts);
+    // A host that wants its own store (or wants to mirror the lens elsewhere)
+    // listens for this instead of passing a persistKey.
+    el.dispatchEvent(
+      new CustomEvent("settings", { detail: el.getSettings(), bubbles: true }),
+    );
+  };
+
+  /** The tunable lens settings — the subset that is persisted. */
+  el.getSettings = () => {
+    const out = {};
+    for (const k of PERSIST_KEYS) out[k] = opts[k];
+    return out;
+  };
+
+  el.setSettings = (patch) =>
+    applySettings(sanitize({ ...el.getSettings(), ...patch }, {}));
+
+  el.resetSettings = () => {
+    const defaults = {};
+    for (const k of PERSIST_KEYS) defaults[k] = NAV_DEFAULTS[k];
+    applySettings(defaults);
+  };
+
+  if (opts.controls !== false) {
+    controls = buildControls(el, {
+      get: () => opts,
+      set: applySettings,
+      reset: () => el.resetSettings(),
+    });
+  }
+
+  el.getRows = () => model?.rows ?? [];
+  el.getRoot = () => root;
+  // Real leaves only. The synthetic header cells are an internal device for the
+  // flat view's outline; leaking them here would make the count depend on the
+  // current style, which is nobody's idea of a leaf count.
+  el.getLeafCount = () =>
+    root ? leavesOf(root).filter((n) => !n.data.header).length : 0;
+
+  if (typeof ResizeObserver !== "undefined") {
+    const ro = new ResizeObserver(() => draw());
+    ro.observe(el);
+    el.destroy = () => {
+      ro.disconnect();
+      controls?.destroy();
+    };
+  } else {
+    el.destroy = () => controls?.destroy();
+  }
+
+  rebuild();
+  draw();
+  return widget;
+}
+
+export { LAYOUTS, LAYOUT_DEFAULTS, STYLES, basePositions, buildRows, fisheyeNav as default, distort, doiScore, fisheyeNav, fisheyePosition, layout, leafDistance, leavesOf, makeBarScale, nodesOf, normalize$1 as normalize, selectAll, selectDOI, slotAtPixel };