@unpunnyfuns/d3-blockmap 0.0.0-stage → 0.2.0

package/dist/chunk-6BBJWE5O.js

@@ -0,0 +1,1288 @@
+// src/axis.ts
+import { tickStep } from "d3-array";
+
+// src/constants.ts
+var BITS_PER_BYTE = 8;
+var BYTE_SHIFT = 3;
+var BYTE_MASK = 7;
+var FULL_BYTE = 255;
+var BYTES_PER_PIXEL = 4;
+var OPAQUE_ALPHA = 255;
+var COLOR_TABLE_SIZE = 256;
+var CANVAS_ROWS = 1;
+var PERCENT = 100;
+var PERCENT_FRACTION_DIGITS = 1;
+var TOOLTIP_OFFSET_PX = 8;
+var CSS_VAR_MISSING = "--blockmap-missing";
+var CSS_VAR_PARTIAL_LOW = "--blockmap-partial-low";
+var CSS_VAR_PARTIAL_HIGH = "--blockmap-partial-high";
+var CSS_VAR_PARTIAL = "--blockmap-partial";
+var CSS_VAR_COMPLETE = "--blockmap-complete";
+var CSS_VAR_HIGHLIGHT = "--blockmap-highlight";
+var CSS_VAR_BRUSH = "--blockmap-brush";
+var DEFAULT_THEME = {
+  missing: "#2b2b2b",
+  partialLow: "#5b3a00",
+  partialHigh: "#e0a500",
+  partial: "#e0a500",
+  complete: "#2ecc71",
+  highlight: "#ff4d4f",
+  brush: "#ffffff"
+};
+var BRUSH_FILL_OPACITY = 0.3;
+var THEME_ATTRIBUTES = ["class", "style", "data-theme"];
+var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+var ZOOM_STEP = 1.25;
+var DRAG_THRESHOLD_PX = 3;
+var BLINK_INTERVAL_MS = 500;
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var MIN_VIEW_LENGTH = 1;
+var KEY_PAN_FRACTION = 0.1;
+var KEY_PAN_FRACTION_FAST = 0.5;
+var ARIA_LABEL_DEFAULT_PERCENT_DIGITS = 0;
+var ARIA_ROLEDESCRIPTION = "zoomable block map";
+var ARIA_KEYSHORTCUTS = "Plus - ArrowLeft ArrowRight Home";
+var CSS_VAR_AXIS_COLOR = "--blockmap-axis-color";
+var TICK_SPACING_PX = 80;
+var MIN_TICKS = 2;
+var EDGE_ANCHOR_RATIO = 0.5;
+var DECIMAL_BASE = 10;
+var RANGE_PAIR = 2;
+var MAX_BLOCKS = 4294967295;
+
+// src/dom.ts
+var ensureRelative = (container) => {
+  const position = getComputedStyle(container).position;
+  if (position === "static" || !position) container.style.position = "relative";
+};
+var canvasX = (canvas, event) => event.clientX - canvas.getBoundingClientRect().left;
+
+// src/view.ts
+var fullView = (totalBlocks) => ({ start: 0, end: totalBlocks });
+var viewLength = (view) => view.end - view.start;
+var sameView = (a, b) => a.start === b.start && a.end === b.end;
+var createScale = (view, cssWidth) => {
+  const length = viewLength(view);
+  return {
+    domain: [view.start, view.end],
+    range: [0, cssWidth],
+    x: (block) => cssWidth === 0 ? 0 : (block - view.start) / length * cssWidth,
+    block: (x) => cssWidth === 0 ? view.start : view.start + x / cssWidth * length
+  };
+};
+var clampView = (view, totalBlocks) => {
+  let start = Math.round(Math.min(view.start, view.end));
+  let end = Math.round(Math.max(view.start, view.end));
+  if (end - start < MIN_VIEW_LENGTH) end = start + MIN_VIEW_LENGTH;
+  const length = Math.min(end - start, totalBlocks);
+  start = Math.max(0, Math.min(start, totalBlocks - length));
+  return { start, end: start + length };
+};
+var legalView = (view, totalBlocks) => Number.isFinite(view.start) && Number.isFinite(view.end) ? clampView(view, totalBlocks) : void 0;
+var zoomView = (view, anchor, factor, totalBlocks) => {
+  const length = viewLength(view);
+  const scaled = length * factor;
+  const nextLength = Math.max(
+    MIN_VIEW_LENGTH,
+    Math.min(totalBlocks, factor < 1 ? Math.floor(scaled) : Math.ceil(scaled))
+  );
+  const ratio = (anchor - view.start) / length;
+  const start = Math.round(anchor - ratio * nextLength);
+  return clampView({ start, end: start + nextLength }, totalBlocks);
+};
+var panView = (view, deltaBlocks, totalBlocks) => {
+  const length = viewLength(view);
+  const start = Math.round(view.start + deltaBlocks);
+  return clampView({ start, end: start + length }, totalBlocks);
+};
+
+// src/axis.ts
+var AXIS_ATTRIBUTE = "data-blockmap-axis";
+var TICK_ATTRIBUTE = "data-blockmap-tick";
+var FULL = "100%";
+var CENTER = "translateX(-50%)";
+var LEFT_EDGE = "translateX(0)";
+var RIGHT_EDGE = "translateX(-100%)";
+var COMPACT_THRESHOLD = 1e3;
+var MAGNITUDE_STEP = 3;
+var MAX_COMPACT_FRACTION_DIGITS = 3;
+var groupedFormat = new Intl.NumberFormat("en-US");
+var compactFormatters = /* @__PURE__ */ new Map();
+var compactFormatterFor = (digits) => {
+  const cached = compactFormatters.get(digits);
+  if (cached) return cached;
+  const formatter = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: digits
+  });
+  compactFormatters.set(digits, formatter);
+  return formatter;
+};
+var defaultFormat = (block, step = 1) => {
+  if (block < COMPACT_THRESHOLD) return groupedFormat.format(block);
+  const magnitude = Math.floor(Math.log10(Math.max(Math.abs(block), 1)) / MAGNITUDE_STEP) * MAGNITUDE_STEP;
+  const unit = DECIMAL_BASE ** magnitude;
+  const digits = Math.max(0, Math.ceil(Math.log10(unit / step)));
+  if (digits > MAX_COMPACT_FRACTION_DIGITS) return groupedFormat.format(block);
+  return compactFormatterFor(digits).format(block);
+};
+var computeTicks = (view, cssWidth, tickCount) => {
+  if (cssWidth <= 0) return [];
+  const count = tickCount ?? Math.max(MIN_TICKS, Math.floor(cssWidth / TICK_SPACING_PX));
+  const scale = createScale(view, cssWidth);
+  const rawStep = tickStep(view.start, view.end, count);
+  const step = Math.max(1, rawStep);
+  const first = Math.ceil(view.start / step) * step;
+  const result = [];
+  for (let value = first; value <= view.end; value += step) {
+    result.push({ block: value, x: scale.x(value), step });
+  }
+  return result;
+};
+var anchorFor = (x, cssWidth) => {
+  const edge = TICK_SPACING_PX * EDGE_ANCHOR_RATIO;
+  const nearLeft = x < edge;
+  const nearRight = cssWidth - x < edge;
+  if (nearLeft && nearRight) return x < cssWidth - x ? LEFT_EDGE : RIGHT_EDGE;
+  if (nearLeft) return LEFT_EDGE;
+  if (nearRight) return RIGHT_EDGE;
+  return CENTER;
+};
+var createAxis = (container, options) => {
+  const format = options.format ?? defaultFormat;
+  ensureRelative(container);
+  const root = document.createElement("div");
+  root.setAttribute(AXIS_ATTRIBUTE, "");
+  root.setAttribute("aria-hidden", "true");
+  Object.assign(root.style, {
+    position: "absolute",
+    left: "0",
+    right: "0",
+    top: FULL,
+    pointerEvents: "none",
+    userSelect: "none",
+    color: `var(${CSS_VAR_AXIS_COLOR}, currentColor)`
+  });
+  container.append(root);
+  return {
+    // Rebuilds every label on each update. There are only a handful of ticks,
+    // so a single replaceChildren beats diffing, and it cannot leave stale
+    // labels behind after a zoom.
+    update: (view, cssWidth) => {
+      const spans = computeTicks(view, cssWidth, options.tickCount).map((tick) => {
+        const span = document.createElement("span");
+        span.setAttribute(TICK_ATTRIBUTE, "");
+        span.dataset.block = String(tick.block);
+        span.textContent = format(tick.block, tick.step);
+        Object.assign(span.style, {
+          display: "block",
+          position: "absolute",
+          top: "0",
+          left: `${tick.x}px`,
+          transform: anchorFor(tick.x, cssWidth),
+          whiteSpace: "nowrap"
+        });
+        return span;
+      });
+      root.replaceChildren(...spans);
+    },
+    destroy: () => {
+      root.remove();
+    }
+  };
+};
+
+// src/bins.ts
+var discreteColumn = (block, length, binCount) => Math.floor(block * binCount / length);
+var discreteBlock = (column, length, binCount) => Math.ceil((column + 1) * length / binCount) - 1;
+var clipToView = (rawStart, rawEnd, viewStart, viewEnd) => [Math.max(rawStart, viewStart), Math.min(rawEnd, viewEnd)];
+var createBins = (view, binCount) => {
+  const { start: viewStart, end: viewEnd } = view;
+  const length = viewEnd - viewStart;
+  const counts = new Uint32Array(binCount);
+  const binOf = (index) => Math.floor((index - viewStart) * binCount / length);
+  const rangeOf = (bin) => [
+    viewStart + Math.ceil(bin * length / binCount),
+    viewStart + Math.ceil((bin + 1) * length / binCount)
+  ];
+  const sizeOf = (bin) => {
+    const [start, end] = rangeOf(bin);
+    return end - start;
+  };
+  return {
+    binCount,
+    counts,
+    binOf,
+    rangeOf,
+    sizeOf,
+    // Full recount from the bitset, used after a resize or a view change.
+    rebuild: (countInRange) => {
+      counts.fill(0);
+      if (binCount === 0) return;
+      for (let bin = 0; bin < binCount; bin += 1) {
+        const [start, end] = rangeOf(bin);
+        counts[bin] = countInRange(start, end);
+      }
+    },
+    /**
+     * Adds a wholly-new range's blocks to the bin counts without consulting
+     * the bitset: the first and last bins get the part of themselves the
+     * range covers, the bins between get their full size.
+     */
+    addRange: (rawStart, rawEnd) => {
+      const [start, end] = clipToView(rawStart, rawEnd, viewStart, viewEnd);
+      if (binCount === 0 || end <= start) return;
+      const first = binOf(start);
+      const last = binOf(end - 1);
+      if (first === last) {
+        counts[first] += end - start;
+        return;
+      }
+      counts[first] += rangeOf(first)[1] - start;
+      for (let bin = first + 1; bin < last; bin += 1) counts[bin] += sizeOf(bin);
+      counts[last] += end - rangeOf(last)[0];
+    },
+    // Which bins a range overlaps, so callers can mark exactly those dirty.
+    binsTouching: (rawStart, rawEnd) => {
+      const [start, end] = clipToView(rawStart, rawEnd, viewStart, viewEnd);
+      if (binCount === 0 || end <= start) return [];
+      const first = binOf(start);
+      const last = binOf(end - 1);
+      const touched = [];
+      for (let bin = first; bin <= last; bin += 1) touched.push(bin);
+      return touched;
+    },
+    recountBins: (bins, countInRange) => {
+      for (const bin of bins) {
+        const [start, end] = rangeOf(bin);
+        counts[bin] = countInRange(start, end);
+      }
+    }
+  };
+};
+
+// src/brush.ts
+import { brushX } from "d3-brush";
+import { select } from "d3-selection";
+var BRUSH_ATTRIBUTE = "data-blockmap-brush";
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var SELECTION_CLASS = ".selection";
+var GESTURE_LISTENERS = "mousemove.brush mouseup.brush keydown.brush keyup.brush dragstart.drag selectstart.drag";
+var clamp = (value, max) => Math.max(0, Math.min(max, value));
+var toPixels = (selection, view, cssWidth) => {
+  if (cssWidth === 0) return null;
+  if (selection[1] <= view.start || selection[0] >= view.end) return null;
+  const scale = createScale(view, cssWidth);
+  return [clamp(scale.x(selection[0]), cssWidth), clamp(scale.x(selection[1]), cssWidth)];
+};
+var toBlocks = (pixels, view, cssWidth, totalBlocks) => {
+  const scale = createScale(view, cssWidth);
+  const start = clamp(Math.round(scale.block(pixels[0])), totalBlocks);
+  let end = clamp(Math.round(scale.block(pixels[1])), totalBlocks);
+  if (end <= start) {
+    end = Math.min(start + 1, totalBlocks);
+    if (end <= start) return [Math.max(0, end - 1), end];
+  }
+  return [start, end];
+};
+var normalize = (selection, totalBlocks) => {
+  if (!selection) return null;
+  const start = clamp(Math.round(selection[0]), totalBlocks);
+  const end = clamp(Math.round(selection[1]), totalBlocks);
+  return end > start ? [start, end] : null;
+};
+var xSpan = (selection) => {
+  if (!selection) return null;
+  const [x0, x1] = selection;
+  if (typeof x0 !== "number" || typeof x1 !== "number") return null;
+  return [x0, x1];
+};
+var sameRange = (a, b) => a === b || a !== null && b !== null && a[0] === b[0] && a[1] === b[1];
+var createBrushOverlay = (container, deps) => {
+  ensureRelative(container);
+  const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+  svg.setAttribute(BRUSH_ATTRIBUTE, "");
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    touchAction: "none",
+    overflow: "visible",
+    display: "block"
+  });
+  container.append(svg);
+  const g = select(svg).append("g");
+  const onMouseDown = (event) => {
+    event.preventDefault();
+  };
+  svg.addEventListener("mousedown", onMouseDown, true);
+  const brush = brushX().touchable(() => false).filter(
+    (event) => !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.button
+  );
+  let selection = null;
+  let color = DEFAULT_THEME.brush;
+  let silent = false;
+  let active = false;
+  const paint = () => {
+    g.select(SELECTION_CLASS).attr("fill", color).attr("stroke", color).attr("fill-opacity", BRUSH_FILL_OPACITY);
+  };
+  const update = () => {
+    const width = deps.getWidth();
+    brush.extent([
+      [0, 0],
+      [width, deps.getHeight()]
+    ]);
+    g.call(brush);
+    paint();
+    silent = true;
+    try {
+      g.call(brush.move, selection ? toPixels(selection, deps.getView(), width) : null);
+    } finally {
+      silent = false;
+    }
+  };
+  const blocksFrom = (pixels) => {
+    const span = xSpan(pixels);
+    if (!span) return null;
+    return toBlocks(span, deps.getView(), deps.getWidth(), deps.getTotalBlocks());
+  };
+  brush.on("start", (event) => {
+    if (!event.sourceEvent || silent) return;
+    active = true;
+  });
+  brush.on("brush", (event) => {
+    if (!event.sourceEvent || silent) return;
+    deps.onBrush(blocksFrom(event.selection));
+  });
+  brush.on("end", (event) => {
+    if (!event.sourceEvent || silent) return;
+    active = false;
+    const next = normalize(blocksFrom(event.selection), deps.getTotalBlocks());
+    const changed = !sameRange(selection, next);
+    selection = next;
+    update();
+    if (changed) deps.onBrushEnd(selection);
+  });
+  update();
+  return {
+    update,
+    setSelection: (next) => {
+      selection = normalize(next, deps.getTotalBlocks());
+      update();
+    },
+    getSelection: () => selection ? [selection[0], selection[1]] : null,
+    setColor: (next) => {
+      color = next;
+      paint();
+    },
+    // d3-brush only drops its window listeners and re-enables dragging from
+    // inside its own gesture end, so destroying mid-drag has to do it by
+    // hand or they outlive the map. Every targeted browser has
+    // onselectstart, so d3-drag suppresses selection with a listener rather
+    // than an inline style and removing the listeners is the whole cleanup.
+    // Those listeners are removed by name, which would take another
+    // component's brush or drag down with them, so this only runs for a
+    // gesture that is actually in flight.
+    destroy: () => {
+      brush.on("start", null).on("brush", null).on("end", null);
+      g.on(".brush", null);
+      svg.removeEventListener("mousedown", onMouseDown, true);
+      if (active) select(window).on(GESTURE_LISTENERS, null);
+      svg.remove();
+    }
+  };
+};
+
+// src/colors.ts
+import { rgb } from "d3-color";
+import { interpolateRgb, piecewise } from "d3-interpolate";
+var THEME_VARS = {
+  missing: CSS_VAR_MISSING,
+  partialLow: CSS_VAR_PARTIAL_LOW,
+  partialHigh: CSS_VAR_PARTIAL_HIGH,
+  partial: CSS_VAR_PARTIAL,
+  complete: CSS_VAR_COMPLETE,
+  highlight: CSS_VAR_HIGHLIGHT,
+  brush: CSS_VAR_BRUSH
+};
+var LAST_INDEX = COLOR_TABLE_SIZE - 1;
+var FIRST_PARTIAL_INDEX = 1;
+var LAST_PARTIAL_INDEX = LAST_INDEX - 1;
+var parseOr = (value, fallback) => {
+  try {
+    return rgb(value).displayable() ? value : fallback;
+  } catch {
+    return fallback;
+  }
+};
+var writeColor = (table, index, css) => {
+  const color = rgb(css);
+  const offset = index * BYTES_PER_PIXEL;
+  table.set([color.r, color.g, color.b, OPAQUE_ALPHA], offset);
+};
+var readTheme = (el) => {
+  const style = getComputedStyle(el);
+  const read = (key) => style.getPropertyValue(THEME_VARS[key]).trim() || DEFAULT_THEME[key];
+  return {
+    missing: read("missing"),
+    partialLow: read("partialLow"),
+    partialHigh: read("partialHigh"),
+    partial: read("partial"),
+    complete: read("complete"),
+    highlight: read("highlight"),
+    brush: read("brush")
+  };
+};
+var createColorScale = (theme, partial = "coverage") => {
+  const table = new Uint8ClampedArray(COLOR_TABLE_SIZE * BYTES_PER_PIXEL);
+  const missing = parseOr(theme.missing, DEFAULT_THEME.missing);
+  const complete = parseOr(theme.complete, DEFAULT_THEME.complete);
+  const partialScale = partial === "coverage" ? piecewise(interpolateRgb, [
+    missing,
+    parseOr(theme.partial, DEFAULT_THEME.partial),
+    complete
+  ]) : interpolateRgb(
+    parseOr(theme.partialLow, DEFAULT_THEME.partialLow),
+    parseOr(theme.partialHigh, DEFAULT_THEME.partialHigh)
+  );
+  writeColor(table, 0, missing);
+  writeColor(table, LAST_INDEX, complete);
+  for (let i = FIRST_PARTIAL_INDEX; i <= LAST_PARTIAL_INDEX; i += 1) {
+    writeColor(table, i, partialScale(i / LAST_INDEX));
+  }
+  return (fraction) => {
+    let index = Math.round(fraction * LAST_INDEX);
+    if (fraction > 0 && index < FIRST_PARTIAL_INDEX) index = FIRST_PARTIAL_INDEX;
+    if (fraction < 1 && index > LAST_PARTIAL_INDEX) index = LAST_PARTIAL_INDEX;
+    const offset = index * BYTES_PER_PIXEL;
+    return table.subarray(offset, offset + BYTES_PER_PIXEL);
+  };
+};
+var highlightColor = (theme) => {
+  const color = rgb(parseOr(theme.highlight, DEFAULT_THEME.highlight));
+  return Uint8ClampedArray.of(color.r, color.g, color.b, OPAQUE_ALPHA);
+};
+var watchTheme = (onChange) => {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [...THEME_ATTRIBUTES]
+  });
+  const media = matchMedia(DARK_SCHEME_QUERY);
+  media.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media.removeEventListener("change", onChange);
+  };
+};
+
+// src/interaction.ts
+var PRIMARY_BUTTON = 0;
+var TOUCH_POINTER = "touch";
+var GRABBING = "grabbing";
+var NO_POINTER = -1;
+var HALF = 2;
+var ZOOM_IN_KEYS = /* @__PURE__ */ new Set(["+", "="]);
+var ZOOM_OUT_KEYS = /* @__PURE__ */ new Set(["-", "_"]);
+var RESET_KEYS = /* @__PURE__ */ new Set(["0", "Home"]);
+var attachInteraction = (surface, canvas, deps) => {
+  let drag;
+  const columnsToBlocks = (px, view) => px * deps.getDpr() / deps.getBinCount() * viewLength(view);
+  const onWheel = (event) => {
+    if (!(event.ctrlKey || event.metaKey)) return;
+    if (drag?.active) return;
+    if (deps.getBinCount() === 0) return;
+    event.preventDefault();
+    const view = deps.getView();
+    const anchor = view.start + columnsToBlocks(canvasX(canvas, event), view);
+    const factor = event.deltaY > 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
+    deps.setView(zoomView(view, anchor, factor, deps.getTotalBlocks()));
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== PRIMARY_BUTTON) return;
+    if (document.activeElement !== canvas && typeof canvas.focus === "function") {
+      canvas.focus({ preventScroll: true });
+    }
+    if (deps.panRequiresShift() && event.pointerType !== TOUCH_POINTER && !event.shiftKey) return;
+    drag = {
+      downX: canvasX(canvas, event),
+      view: deps.getView(),
+      pointerId: event.pointerId ?? NO_POINTER,
+      active: false
+    };
+  };
+  const onPointerMove = (event) => {
+    if (!drag) return;
+    const dx = canvasX(canvas, event) - drag.downX;
+    if (!drag.active) {
+      if (Math.abs(dx) < DRAG_THRESHOLD_PX) return;
+      drag.active = true;
+      if (typeof surface.setPointerCapture === "function" && drag.pointerId !== NO_POINTER) {
+        surface.setPointerCapture(drag.pointerId);
+      }
+      surface.style.cursor = GRABBING;
+      deps.onDragStart();
+    }
+    if (deps.getBinCount() === 0) return;
+    deps.setView(panView(drag.view, -columnsToBlocks(dx, drag.view), deps.getTotalBlocks()));
+  };
+  const endDrag = () => {
+    if (!drag) return;
+    if (drag.active) {
+      const hasCapture = drag.pointerId !== NO_POINTER && (surface.hasPointerCapture?.(drag.pointerId) ?? true);
+      if (typeof surface.releasePointerCapture === "function" && hasCapture) {
+        surface.releasePointerCapture(drag.pointerId);
+      }
+      surface.style.cursor = "";
+      deps.onDragEnd();
+    }
+    drag = void 0;
+  };
+  const onDblClick = () => deps.resetView();
+  const onKeyDown = (event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    if (drag?.active) return;
+    const view = deps.getView();
+    const length = viewLength(view);
+    const centre = view.start + length / HALF;
+    const total = deps.getTotalBlocks();
+    if (ZOOM_IN_KEYS.has(event.key)) {
+      deps.setView(zoomView(view, centre, 1 / ZOOM_STEP, total));
+    } else if (ZOOM_OUT_KEYS.has(event.key)) {
+      deps.setView(zoomView(view, centre, ZOOM_STEP, total));
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      const fraction = event.shiftKey ? KEY_PAN_FRACTION_FAST : KEY_PAN_FRACTION;
+      const delta = length * fraction * (event.key === "ArrowLeft" ? -1 : 1);
+      deps.setView(panView(view, delta, total));
+    } else if (RESET_KEYS.has(event.key)) {
+      deps.resetView();
+    } else {
+      return;
+    }
+    event.preventDefault();
+  };
+  surface.addEventListener("wheel", onWheel, { passive: false });
+  surface.addEventListener("pointerdown", onPointerDown);
+  surface.addEventListener("pointermove", onPointerMove);
+  surface.addEventListener("pointerup", endDrag);
+  surface.addEventListener("pointercancel", endDrag);
+  surface.addEventListener("dblclick", onDblClick);
+  canvas.addEventListener("keydown", onKeyDown);
+  return () => {
+    endDrag();
+    surface.removeEventListener("wheel", onWheel);
+    surface.removeEventListener("pointerdown", onPointerDown);
+    surface.removeEventListener("pointermove", onPointerMove);
+    surface.removeEventListener("pointerup", endDrag);
+    surface.removeEventListener("pointercancel", endDrag);
+    surface.removeEventListener("dblclick", onDblClick);
+    canvas.removeEventListener("keydown", onKeyDown);
+  };
+};
+
+// src/renderer.ts
+var NO_FRAME = 0;
+var NO_TIMER = 0;
+var COMPLETE = 1;
+var RAF_SCHEDULER = {
+  request: (callback) => requestAnimationFrame(callback),
+  cancel: (handle) => cancelAnimationFrame(handle)
+};
+var WINDOW_TIMER = {
+  set: (callback, ms) => window.setInterval(callback, ms),
+  clear: (id) => window.clearInterval(id)
+};
+var createRenderer = (ctx, source, scheduler = RAF_SCHEDULER, timer = WINDOW_TIMER) => {
+  let image;
+  let scale;
+  let frame = NO_FRAME;
+  let allDirty = false;
+  let highlight;
+  let phase = false;
+  let blinkId = NO_TIMER;
+  const dirty = /* @__PURE__ */ new Set();
+  const ensureImage = () => {
+    const { binCount } = source;
+    if (binCount === 0) return void 0;
+    if (!image || image.width !== binCount) {
+      image = ctx.createImageData(binCount, CANVAS_ROWS);
+      allDirty = true;
+    }
+    return image;
+  };
+  const colorFor = (colors, fraction) => highlight && phase && fraction < COMPLETE ? highlight : colors(fraction);
+  const writeColumn = (target, column, color) => {
+    target.data.set(color, column * BYTES_PER_PIXEL);
+  };
+  const paintDiscrete = (target, colors) => {
+    const { binCount } = source;
+    const view = source.getView();
+    const length = viewLength(view);
+    for (let block = 0; block < length; block += 1) {
+      const color = colorFor(colors, source.has(view.start + block) ? COMPLETE : 0);
+      const start = discreteColumn(block, length, binCount);
+      const end = discreteColumn(block + 1, length, binCount);
+      for (let column = start; column < end; column += 1) writeColumn(target, column, color);
+    }
+  };
+  const paintBins = (target, colors) => {
+    if (allDirty) {
+      for (let bin = 0; bin < source.binCount; bin += 1)
+        writeColumn(target, bin, colorFor(colors, source.fraction(bin)));
+      return;
+    }
+    for (const bin of dirty) {
+      if (bin >= target.width) continue;
+      writeColumn(target, bin, colorFor(colors, source.fraction(bin)));
+    }
+  };
+  const paint = () => {
+    frame = NO_FRAME;
+    const target = ensureImage();
+    if (!target || !scale) {
+      dirty.clear();
+      allDirty = false;
+      return;
+    }
+    if (viewLength(source.getView()) < source.binCount) paintDiscrete(target, scale);
+    else paintBins(target, scale);
+    ctx.putImageData(target, 0, 0);
+    dirty.clear();
+    allDirty = false;
+  };
+  const schedule = () => {
+    if (frame !== NO_FRAME) return;
+    frame = scheduler.request(paint);
+  };
+  const markAllDirty = () => {
+    allDirty = true;
+    schedule();
+  };
+  const stopBlink = () => {
+    if (blinkId !== NO_TIMER) timer.clear(blinkId);
+    blinkId = NO_TIMER;
+  };
+  return {
+    setColors: (next) => {
+      scale = next;
+      markAllDirty();
+    },
+    // Restarts cleanly on every call: the old interval is always cleared, so
+    // repeated enables cannot stack up blink timers. Turning the highlight
+    // off when it was never on is a no-op, avoiding a pointless repaint.
+    setHighlight: (on, color, blink) => {
+      if (!on && highlight === void 0) return;
+      stopBlink();
+      highlight = on ? color : void 0;
+      phase = on;
+      if (on && blink) {
+        blinkId = timer.set(() => {
+          phase = !phase;
+          markAllDirty();
+        }, BLINK_INTERVAL_MS);
+      }
+      markAllDirty();
+    },
+    // Theme changed mid-highlight; the blink phase keeps running untouched.
+    setHighlightColor: (color) => {
+      if (highlight === void 0) return;
+      highlight = color;
+      markAllDirty();
+    },
+    markDirty: (bins) => {
+      for (let i = 0; i < bins.length; i += 1) dirty.add(bins[i]);
+      if (bins.length > 0) schedule();
+    },
+    markAllDirty,
+    destroy: () => {
+      stopBlink();
+      if (frame !== NO_FRAME) scheduler.cancel(frame);
+      frame = NO_FRAME;
+      dirty.clear();
+    }
+  };
+};
+
+// src/bitset.ts
+var maskRange = (from, to) => (1 << to) - 1 & ~((1 << from) - 1);
+var POPCOUNT = new Uint8Array(1 << BITS_PER_BYTE);
+for (let i = 1; i < POPCOUNT.length; i += 1) {
+  POPCOUNT[i] = POPCOUNT[i >> 1] + (i & 1);
+}
+var createBitset = (size) => {
+  const bytes = new Uint8Array(Math.ceil(size / BITS_PER_BYTE));
+  let count = 0;
+  return {
+    has: (index) => (bytes[index >>> BYTE_SHIFT] & 1 << (index & BYTE_MASK)) !== 0,
+    /**
+     * Returns false when the bit was already set, so callers can skip the
+     * dirty-marking work for blocks that did not actually change.
+     */
+    set: (index) => {
+      const byte = index >>> BYTE_SHIFT;
+      const mask = 1 << (index & BYTE_MASK);
+      if ((bytes[byte] & mask) !== 0) return false;
+      bytes[byte] |= mask;
+      count += 1;
+      return true;
+    },
+    /**
+     * Head/middle/tail: OR a partial mask into the first byte, memset the
+     * whole bytes in between, OR a partial mask into the last. `end - 1` is
+     * the last included bit, so `toBit` is its offset plus one.
+     */
+    fill: (start, end) => {
+      if (end <= start) return;
+      const firstByte = start >>> BYTE_SHIFT;
+      const lastByte = end - 1 >>> BYTE_SHIFT;
+      const fromBit = start & BYTE_MASK;
+      const toBit = (end - 1 & BYTE_MASK) + 1;
+      if (firstByte === lastByte) {
+        bytes[firstByte] |= maskRange(fromBit, toBit);
+        return;
+      }
+      bytes[firstByte] |= maskRange(fromBit, BITS_PER_BYTE);
+      bytes.fill(FULL_BYTE, firstByte + 1, lastByte);
+      bytes[lastByte] |= maskRange(0, toBit);
+    },
+    // Same head/middle/tail shape as fill, with the masks inverted.
+    clearRange: (start, end) => {
+      if (end <= start) return;
+      const firstByte = start >>> BYTE_SHIFT;
+      const lastByte = end - 1 >>> BYTE_SHIFT;
+      const fromBit = start & BYTE_MASK;
+      const toBit = (end - 1 & BYTE_MASK) + 1;
+      if (firstByte === lastByte) {
+        bytes[firstByte] &= ~maskRange(fromBit, toBit);
+        return;
+      }
+      bytes[firstByte] &= ~maskRange(fromBit, BITS_PER_BYTE);
+      bytes.fill(0, firstByte + 1, lastByte);
+      bytes[lastByte] &= ~maskRange(0, toBit);
+    },
+    // Head and tail are masked before counting; the middle bytes are counted
+    // whole, one table lookup each.
+    countRange: (start, end) => {
+      if (end <= start) return 0;
+      const firstByte = start >>> BYTE_SHIFT;
+      const lastByte = end - 1 >>> BYTE_SHIFT;
+      const fromBit = start & BYTE_MASK;
+      const toBit = (end - 1 & BYTE_MASK) + 1;
+      if (firstByte === lastByte) {
+        return POPCOUNT[bytes[firstByte] & maskRange(fromBit, toBit)];
+      }
+      let total = POPCOUNT[bytes[firstByte] & maskRange(fromBit, BITS_PER_BYTE)];
+      for (let b = firstByte + 1; b < lastByte; b += 1) total += POPCOUNT[bytes[b]];
+      total += POPCOUNT[bytes[lastByte] & maskRange(0, toBit)];
+      return total;
+    },
+    clear: () => {
+      bytes.fill(0);
+      count = 0;
+    },
+    /**
+     * fill and clearRange do not maintain `count`, because recounting a
+     * million-bit span per call would defeat the point. Callers that use them
+     * compute the delta themselves and write the total back here.
+     */
+    setCount: (next) => {
+      count = next;
+    },
+    get count() {
+      return count;
+    }
+  };
+};
+
+// src/ranges.ts
+var isFlatPairs = (input) => ArrayBuffer.isView(input) || typeof input[0] === "number";
+var readPairs = (input) => {
+  const pairs = [];
+  if (isFlatPairs(input)) {
+    const pairCount = Math.floor(input.length / RANGE_PAIR);
+    for (let i = 0; i < pairCount; i += 1) {
+      pairs.push([input[i * RANGE_PAIR], input[i * RANGE_PAIR + 1]]);
+    }
+    return pairs;
+  }
+  for (let i = 0; i < input.length; i += 1) {
+    const tuple = input[i];
+    pairs.push([tuple[0], tuple[1]]);
+  }
+  return pairs;
+};
+var normalizeRanges = (input, totalBlocks) => {
+  const clamped = [];
+  for (const [rawStart, rawEnd] of readPairs(input)) {
+    if (!Number.isInteger(rawStart) || !Number.isInteger(rawEnd)) continue;
+    const start = Math.max(0, rawStart);
+    const end = Math.min(totalBlocks, rawEnd);
+    if (end > start) clamped.push([start, end]);
+  }
+  clamped.sort((a, b) => a[0] - b[0]);
+  const merged = [];
+  for (const [start, end] of clamped) {
+    const lastIndex = merged.length - 1;
+    if (merged.length > 0 && start <= merged[lastIndex]) {
+      merged[lastIndex] = Math.max(merged[lastIndex], end);
+    } else {
+      merged.push(start, end);
+    }
+  }
+  return Uint32Array.from(merged);
+};
+var rangesLength = (flat) => {
+  let total = 0;
+  for (let i = 0; i < flat.length; i += RANGE_PAIR) total += flat[i + 1] - flat[i];
+  return total;
+};
+
+// src/state.ts
+var EMPTY_DIRTY = new Uint32Array(0);
+var isValidIndex = (index, totalBlocks) => Number.isInteger(index) && index >= 0 && index < totalBlocks;
+var createBlockState = (totalBlocks) => {
+  if (!Number.isInteger(totalBlocks) || totalBlocks < 1) {
+    throw new RangeError(`totalBlocks must be a positive integer, got ${totalBlocks}`);
+  }
+  if (totalBlocks > MAX_BLOCKS) {
+    throw new RangeError(
+      `totalBlocks must fit in an unsigned 32-bit integer (<= ${MAX_BLOCKS}), got ${totalBlocks}`
+    );
+  }
+  const bitset = createBitset(totalBlocks);
+  let view = fullView(totalBlocks);
+  let bins = createBins(view, 0);
+  const inView = (index) => index >= view.start && index < view.end;
+  const add = (indices) => {
+    const hasBins = bins.binCount > 0;
+    const dirty = /* @__PURE__ */ new Set();
+    for (let i = 0; i < indices.length; i += 1) {
+      const index = indices[i];
+      if (!isValidIndex(index, totalBlocks) || !bitset.set(index)) continue;
+      if (!hasBins || !inView(index)) continue;
+      const bin = bins.binOf(index);
+      bins.counts[bin] += 1;
+      dirty.add(bin);
+    }
+    return dirty.size === 0 ? EMPTY_DIRTY : Uint32Array.from(dirty).sort();
+  };
+  const applyRanges = (input, complete) => {
+    const flat = normalizeRanges(input, totalBlocks);
+    const dirty = /* @__PURE__ */ new Set();
+    let delta = 0;
+    for (let i = 0; i < flat.length; i += RANGE_PAIR) {
+      const start = flat[i];
+      const end = flat[i + 1];
+      const present = bitset.countRange(start, end);
+      if (complete) {
+        bitset.fill(start, end);
+        delta += end - start - present;
+      } else {
+        bitset.clearRange(start, end);
+        delta -= present;
+      }
+      for (const bin of bins.binsTouching(start, end)) dirty.add(bin);
+    }
+    bins.recountBins(dirty, bitset.countRange);
+    bitset.setCount(bitset.count + delta);
+    return dirty.size === 0 ? EMPTY_DIRTY : Uint32Array.from(dirty).sort();
+  };
+  return {
+    totalBlocks,
+    get binCount() {
+      return bins.binCount;
+    },
+    // Column count changed: the bin boundaries move, so rebuild from the
+    // bitset rather than trying to redistribute the old counts.
+    resize: (binCount) => {
+      bins = createBins(view, binCount);
+      bins.rebuild(bitset.countRange);
+    },
+    // Takes a view legalView has already checked, so the façade validates once
+    // per request rather than again at commit. Returns whether anything moved,
+    // so callers can skip a repaint.
+    setView: (next) => {
+      if (sameView(next, view)) return false;
+      view = { ...next };
+      bins = createBins(view, bins.binCount);
+      bins.rebuild(bitset.countRange);
+      return true;
+    },
+    // A copy, because `view` is live and handed to external callbacks.
+    getView: () => ({ ...view }),
+    add,
+    replace: (indices) => {
+      bitset.clear();
+      bins.counts.fill(0);
+      add(indices);
+    },
+    /**
+     * Ranges are already merged and disjoint, so each one's blocks are new to
+     * the bitset: bins.addRange can add sizes arithmetically and the total is
+     * just the summed range lengths, with no counting pass.
+     */
+    replaceRanges: (input) => {
+      const flat = normalizeRanges(input, totalBlocks);
+      bitset.clear();
+      bins.counts.fill(0);
+      for (let i = 0; i < flat.length; i += RANGE_PAIR) {
+        bitset.fill(flat[i], flat[i + 1]);
+        bins.addRange(flat[i], flat[i + 1]);
+      }
+      bitset.setCount(rangesLength(flat));
+    },
+    addRanges: (input) => applyRanges(input, true),
+    removeRanges: (input) => applyRanges(input, false),
+    has: bitset.has,
+    // Coverage in [0, 1], which is what the colour scale is indexed by.
+    fraction: (bin) => {
+      const size = bins.sizeOf(bin);
+      return size === 0 ? 0 : bins.counts[bin] / size;
+    },
+    countOf: (bin) => bins.counts[bin],
+    rangeOf: (bin) => bins.rangeOf(bin),
+    progress: () => ({ completed: bitset.count, total: totalBlocks })
+  };
+};
+
+// src/tooltip.ts
+var LOCALE = "en-US";
+var TOOLTIP_ATTRIBUTE = "data-blockmap-tooltip";
+var SEPARATOR = " \xB7 ";
+var EN_DASH = "\u2013";
+var countFormat = new Intl.NumberFormat(LOCALE);
+var MIN_PARTIAL_STEP = 1 / DECIMAL_BASE ** PERCENT_FRACTION_DIGITS;
+var MAX_PARTIAL = (PERCENT - MIN_PARTIAL_STEP).toFixed(PERCENT_FRACTION_DIGITS);
+var MIN_PARTIAL = MIN_PARTIAL_STEP.toFixed(PERCENT_FRACTION_DIGITS);
+var MAX_FIXED = PERCENT.toFixed(PERCENT_FRACTION_DIGITS);
+var MIN_FIXED = 0 .toFixed(PERCENT_FRACTION_DIGITS);
+var formatPercent = (count, size) => {
+  if (count === 0) return "0%";
+  if (count === size) return "100%";
+  const value = count / size * PERCENT;
+  const text = value.toFixed(PERCENT_FRACTION_DIGITS);
+  if (text === MAX_FIXED) {
+    return `>${MAX_PARTIAL}%`;
+  }
+  if (text === MIN_FIXED) {
+    return `<${MIN_PARTIAL}%`;
+  }
+  return `${text}%`;
+};
+var formatBinTooltip = ([start, end], count) => {
+  const size = end - start;
+  const label = size === 1 ? `Block ${countFormat.format(start)}` : `Blocks ${countFormat.format(start)}${EN_DASH}${countFormat.format(end - 1)}`;
+  return `${label}${SEPARATOR}${countFormat.format(count)} / ${countFormat.format(size)} (${formatPercent(count, size)})`;
+};
+var formatBlockTooltip = (index, complete) => `Block ${countFormat.format(index)}${SEPARATOR}${complete ? "complete" : "missing"}`;
+var createTooltip = (container) => {
+  const el = document.createElement("div");
+  el.setAttribute(TOOLTIP_ATTRIBUTE, "");
+  Object.assign(el.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    display: "none",
+    pointerEvents: "none",
+    whiteSpace: "nowrap",
+    transform: "translateY(-100%)"
+  });
+  ensureRelative(container);
+  container.append(el);
+  return {
+    // x is in container-relative CSS pixels; the offset keeps the label from
+    // sitting directly under the cursor.
+    show: (x, text) => {
+      el.textContent = text;
+      el.style.left = `${x + TOOLTIP_OFFSET_PX}px`;
+      el.style.display = "block";
+    },
+    hide: () => {
+      el.style.display = "none";
+    },
+    destroy: () => {
+      el.remove();
+    }
+  };
+};
+
+// src/blockMap.ts
+var FULL2 = "100%";
+var CONTEXT_ID = "2d";
+var NO_FRAME2 = 0;
+var LOCALE2 = "en-US";
+var ARIA_LABEL_ATTRIBUTE = "aria-label";
+var numberFormat = new Intl.NumberFormat(LOCALE2);
+var defaultLabel = (progress) => {
+  const percent = Math.floor(progress.completed / progress.total * PERCENT).toFixed(
+    ARIA_LABEL_DEFAULT_PERCENT_DIGITS
+  );
+  return `Download progress: ${numberFormat.format(progress.completed)} of ${numberFormat.format(progress.total)} blocks (${percent}%)`;
+};
+var dprQuery = (dpr) => `(resolution: ${dpr}dppx)`;
+var createBlockMap = (container, options) => {
+  const state = createBlockState(options.totalBlocks);
+  const initialView = options.view && legalView(options.view, state.totalBlocks);
+  if (initialView) state.setView(initialView);
+  const canvas = document.createElement("canvas");
+  Object.assign(canvas.style, {
+    display: "block",
+    width: FULL2,
+    height: FULL2,
+    touchAction: "none"
+  });
+  canvas.height = CANVAS_ROWS;
+  canvas.setAttribute("role", "img");
+  canvas.setAttribute("aria-roledescription", ARIA_ROLEDESCRIPTION);
+  if (options.interactive !== false) {
+    canvas.tabIndex = 0;
+    canvas.setAttribute("aria-keyshortcuts", ARIA_KEYSHORTCUTS);
+  }
+  container.append(canvas);
+  const ctx = canvas.getContext(CONTEXT_ID);
+  if (!ctx) {
+    canvas.remove();
+    throw new Error(`Could not acquire a ${CONTEXT_ID} canvas context`);
+  }
+  const renderer = createRenderer(ctx, state);
+  let destroyed = false;
+  let cssWidth = 0;
+  let cssHeight = 0;
+  let dpr = devicePixelRatio;
+  let dprMedia;
+  let theme = readTheme(container);
+  let highlightOn = false;
+  let dragging = false;
+  let downX = Number.NaN;
+  const overlay = options.brush === true ? createBrushOverlay(container, {
+    getView: () => state.getView(),
+    getWidth: () => cssWidth,
+    getHeight: () => cssHeight,
+    getTotalBlocks: () => state.totalBlocks,
+    onBrush: (selection) => options.onBrush?.(selection),
+    onBrushEnd: (selection) => options.onBrushEnd?.(selection)
+  }) : void 0;
+  const tooltip = createTooltip(container);
+  const axisOptions = options.axis === true ? {} : options.axis === false || options.axis === void 0 ? void 0 : options.axis;
+  const axis = axisOptions ? createAxis(container, axisOptions) : void 0;
+  const motionMedia = matchMedia(REDUCED_MOTION_QUERY);
+  const blinkAllowed = () => !motionMedia.matches;
+  const applyHighlight = () => {
+    renderer.setHighlight(highlightOn, highlightColor(theme), blinkAllowed());
+  };
+  const onMotionChange = () => {
+    if (highlightOn) applyHighlight();
+  };
+  motionMedia.addEventListener("change", onMotionChange);
+  const applyTheme = () => {
+    theme = readTheme(container);
+    renderer.setColors(createColorScale(theme, options.partial));
+    if (highlightOn) renderer.setHighlightColor(highlightColor(theme));
+    overlay?.setColor(theme.brush);
+  };
+  const writeLabel = () => {
+    canvas.setAttribute(ARIA_LABEL_ATTRIBUTE, (options.label ?? defaultLabel)(state.progress()));
+  };
+  const updateChrome = () => {
+    axis?.update(state.getView(), cssWidth);
+    overlay?.update();
+  };
+  let pendingView;
+  let viewFrame = NO_FRAME2;
+  const getView = () => ({ ...pendingView ?? state.getView() });
+  const commitView = () => {
+    viewFrame = NO_FRAME2;
+    const next = pendingView;
+    pendingView = void 0;
+    if (!next || !state.setView(next)) return;
+    renderer.markAllDirty();
+    updateChrome();
+    options.onViewChange?.(state.getView());
+  };
+  const setView = (view) => {
+    const legal = legalView(view, state.totalBlocks);
+    if (!legal || sameView(legal, pendingView ?? state.getView())) return;
+    pendingView = legal;
+    if (viewFrame !== NO_FRAME2) return;
+    viewFrame = requestAnimationFrame(commitView);
+  };
+  const resetView = () => setView(fullView(state.totalBlocks));
+  const layout = () => {
+    if (cssWidth === 0) return;
+    const binCount = Math.round(cssWidth * dpr);
+    if (binCount !== state.binCount) {
+      canvas.width = binCount;
+      state.resize(binCount);
+      renderer.markAllDirty();
+    }
+    updateChrome();
+  };
+  const onDprChange = () => {
+    dpr = devicePixelRatio;
+    layout();
+    watchDpr();
+  };
+  const watchDpr = () => {
+    dprMedia?.removeEventListener("change", onDprChange);
+    dprMedia = matchMedia(dprQuery(dpr));
+    dprMedia.addEventListener("change", onDprChange, { once: true });
+  };
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    cssWidth = entry.contentRect.width;
+    cssHeight = entry.contentRect.height;
+    layout();
+  });
+  resizeObserver.observe(container);
+  const locate = (x) => {
+    const { binCount } = state;
+    if (binCount === 0) return void 0;
+    if (x < 0 || x >= cssWidth) return void 0;
+    const column = Math.min(binCount - 1, Math.max(0, Math.floor(x * dpr)));
+    const view = state.getView();
+    const length = viewLength(view);
+    if (length < binCount) {
+      const block = view.start + discreteBlock(column, length, binCount);
+      return {
+        block,
+        range: [block, block + 1],
+        completed: state.has(block) ? 1 : 0,
+        total: 1
+      };
+    }
+    const [start, end] = state.rangeOf(column);
+    return {
+      block: start,
+      range: [start, end],
+      completed: state.countOf(column),
+      total: end - start
+    };
+  };
+  const onPointerMove = (event) => {
+    if (dragging) return;
+    const x = canvasX(canvas, event);
+    const hit = locate(x);
+    if (!hit) {
+      tooltip.hide();
+      return;
+    }
+    const text = viewLength(state.getView()) < state.binCount ? formatBlockTooltip(hit.block, hit.completed === 1) : formatBinTooltip(hit.range, hit.completed);
+    tooltip.show(x, text);
+  };
+  const onPointerLeave = () => tooltip.hide();
+  const onPointerDown = (event) => {
+    downX = event.clientX;
+  };
+  const onClick = (event) => {
+    const travelled = Math.abs(event.clientX - downX);
+    downX = Number.NaN;
+    if (travelled >= DRAG_THRESHOLD_PX) return;
+    if (!options.onBlockClick) return;
+    const hit = locate(canvasX(canvas, event));
+    if (!hit) return;
+    options.onBlockClick({ ...hit, originalEvent: event });
+  };
+  container.addEventListener("pointermove", onPointerMove);
+  container.addEventListener("pointerleave", onPointerLeave);
+  container.addEventListener("pointerdown", onPointerDown);
+  container.addEventListener("click", onClick);
+  const detachInteraction = options.interactive === false ? void 0 : attachInteraction(container, canvas, {
+    getView,
+    setView,
+    resetView,
+    getBinCount: () => state.binCount,
+    getDpr: () => dpr,
+    getTotalBlocks: () => state.totalBlocks,
+    panRequiresShift: () => overlay !== void 0,
+    onDragStart: () => {
+      dragging = true;
+      tooltip.hide();
+    },
+    onDragEnd: () => {
+      dragging = false;
+    }
+  });
+  const unwatchTheme = watchTheme(applyTheme);
+  watchDpr();
+  applyTheme();
+  if (options.initialRanges) state.replaceRanges(options.initialRanges);
+  if (options.initialBlocks) renderer.markDirty(state.add(options.initialBlocks));
+  writeLabel();
+  const live = (method) => (...args) => {
+    if (!destroyed) method(...args);
+  };
+  return {
+    setBlocks: live((indices) => {
+      state.replace(indices);
+      renderer.markAllDirty();
+      writeLabel();
+    }),
+    setRanges: live((ranges) => {
+      state.replaceRanges(ranges);
+      renderer.markAllDirty();
+      writeLabel();
+    }),
+    // The incremental paths repaint only the bins the state reports changed.
+    addBlocks: live((indices) => {
+      renderer.markDirty(state.add(indices));
+      writeLabel();
+    }),
+    addRanges: live((ranges) => {
+      renderer.markDirty(state.addRanges(ranges));
+      writeLabel();
+    }),
+    removeRanges: live((ranges) => {
+      renderer.markDirty(state.removeRanges(ranges));
+      writeLabel();
+    }),
+    setView: live(setView),
+    resetView: live(resetView),
+    getView,
+    // Built from the committed view, so the scale always matches what is on
+    // screen rather than a change still waiting for its frame.
+    getScale: () => createScale(state.getView(), cssWidth),
+    // Selections are only meaningful while there is an overlay to draw them:
+    // without one setBrush has nothing to store and getBrush nothing to
+    // report. A destroyed map reports none either, rather than whatever the
+    // detached overlay was last holding.
+    setBrush: live((selection) => overlay?.setSelection(selection)),
+    getBrush: () => destroyed ? null : overlay?.getSelection() ?? null,
+    setHighlight: live((on) => {
+      highlightOn = on;
+      applyHighlight();
+    }),
+    getProgress: () => destroyed ? { completed: 0, total: state.totalBlocks } : state.progress(),
+    // Idempotent, and unwinds in the reverse order of construction: pending
+    // frame, observers, listeners, owned children, then the canvas itself.
+    destroy: live(() => {
+      destroyed = true;
+      if (viewFrame !== NO_FRAME2) cancelAnimationFrame(viewFrame);
+      viewFrame = NO_FRAME2;
+      pendingView = void 0;
+      resizeObserver.disconnect();
+      unwatchTheme();
+      dprMedia?.removeEventListener("change", onDprChange);
+      motionMedia.removeEventListener("change", onMotionChange);
+      container.removeEventListener("pointermove", onPointerMove);
+      container.removeEventListener("pointerleave", onPointerLeave);
+      container.removeEventListener("pointerdown", onPointerDown);
+      container.removeEventListener("click", onClick);
+      detachInteraction?.();
+      renderer.destroy();
+      tooltip.destroy();
+      axis?.destroy();
+      overlay?.destroy();
+      canvas.remove();
+    })
+  };
+};
+
+export {
+  fullView,
+  createScale,
+  defaultLabel,
+  createBlockMap
+};
+//# sourceMappingURL=chunk-6BBJWE5O.js.map