@john-guerra/fisheye-nav 0.1.0

package/dist/fisheye-nav.js

@@ -0,0 +1,4505 @@
+// @john-guerra/fisheye-nav v0.1.0 Copyright (c) 2026 John Alexis Guerra Gómez
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.fisheyeNav = {}));
+})(this, (function (exports) { 'use strict';
+
+  // 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;
+  }
+
+  exports.LAYOUTS = LAYOUTS;
+  exports.LAYOUT_DEFAULTS = LAYOUT_DEFAULTS;
+  exports.STYLES = STYLES;
+  exports.basePositions = basePositions;
+  exports.buildRows = buildRows;
+  exports.default = fisheyeNav;
+  exports.distort = distort;
+  exports.doiScore = doiScore;
+  exports.fisheyeNav = fisheyeNav;
+  exports.fisheyePosition = fisheyePosition;
+  exports.layout = layout;
+  exports.leafDistance = leafDistance;
+  exports.leavesOf = leavesOf;
+  exports.makeBarScale = makeBarScale;
+  exports.nodesOf = nodesOf;
+  exports.normalize = normalize$1;
+  exports.selectAll = selectAll;
+  exports.selectDOI = selectDOI;
+  exports.slotAtPixel = slotAtPixel;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));