@behindthemusictree/genre-tree-view 6.2.0 → 6.5.0

package/dist/index.cjs

@@ -181,6 +181,9 @@ var MIN_NODE_WIDTH = 180;
 var MAX_NODE_WIDTH = 700;
 var MIN_NODE_HEIGHT = 35;
 var MAX_NODE_HEIGHT = 120;
+var NODE_SIZE_REFERENCE_COUNT = 100;
+var HIGH_DENSITY_NODE_MAX_FLOOR_SCALE = 1.5;
+var LOW_DENSITY_DOT_MAX_RADIUS = 70;
 var TOOLBAR_MENU_X_GAP = 4;
 var ACTIONS_OVERLAY_WIDTH = MENU_WIDTH + TOOLBAR_MENU_X_GAP;
 var ACTIONS_OVERLAY_HEIGHT = RECT_BASE_DIMENSIONS.HEIGHT * 7;
@@ -195,23 +198,47 @@ var HORIZONTAL_SEPARATION_BETWEEN_NODES = (NODE_DIMENSIONS.WIDTH + HORIZONTAL_SE
 var VERTICAL_SEPARATION_BETWEEN_NODES = NODE_DIMENSIONS.HEIGHT + VERTICAL_SEPARATION_BETWEEN_RECTANGLES;
 var VERTICAL_ORIENTATION_DEPTH_SEPARATION = VERTICAL_SEPARATION_BETWEEN_NODES * 2 * DEPTH_AXIS_SPACING_FACTOR;
 var SIBLING_SEPARATION_BETWEEN_NODES = MAX_NODE_WIDTH + HORIZONTAL_SEPARATION_BETWEEN_RECTANGLES;
-function getItemCountRange(nodes) {
-  if (nodes.length === 0) return { min: 0, max: 0 };
+function getDensityAdjustedMax(baseMax, min, nodeCount) {
+  const safeNodeCount = Number.isFinite(nodeCount) ? Math.max(1, nodeCount) : 1;
+  const availableRangeScale = Math.min(1, NODE_SIZE_REFERENCE_COUNT / safeNodeCount);
+  const denseTreeFloor = min * HIGH_DENSITY_NODE_MAX_FLOOR_SCALE;
+  return denseTreeFloor + (baseMax - denseTreeFloor) * availableRangeScale;
+}
+function getDensityAdjustedDotMax(nodeCount) {
+  const safeNodeCount = Number.isFinite(nodeCount) ? Math.max(1, nodeCount) : 1;
+  const inverseDensityRadius = NODE_DOT_MAX_RADIUS * NODE_SIZE_REFERENCE_COUNT / safeNodeCount;
+  const denseTreeFloor = NODE_DOT_MIN_RADIUS * HIGH_DENSITY_NODE_MAX_FLOOR_SCALE;
+  return Math.max(denseTreeFloor, Math.min(LOW_DENSITY_DOT_MAX_RADIUS, inverseDensityRadius));
+}
+function getItemCountRange(nodes, options = {}) {
   const counts = nodes.map((node) => node.itemCount);
-  return { min: Math.min(...counts), max: Math.max(...counts) };
+  const validScaleMax = options.itemCountScaleMax !== void 0 && Number.isFinite(options.itemCountScaleMax) && options.itemCountScaleMax >= 0;
+  const nodeCount = options.nodeCountForSizing ?? nodes.length;
+  const observedMin = counts.length === 0 ? 0 : Math.min(...counts);
+  const observedMax = counts.length === 0 ? 0 : Math.max(...counts);
+  const includeDensityCaps = options.nodeCountForSizing !== void 0 || validScaleMax;
+  return {
+    min: validScaleMax ? 0 : observedMin,
+    max: validScaleMax ? options.itemCountScaleMax : observedMax,
+    ...includeDensityCaps && {
+      maxNodeWidth: getDensityAdjustedMax(MAX_NODE_WIDTH, MIN_NODE_WIDTH, nodeCount),
+      maxNodeHeight: getDensityAdjustedMax(MAX_NODE_HEIGHT, MIN_NODE_HEIGHT, nodeCount),
+      maxDotRadius: getDensityAdjustedDotMax(nodeCount)
+    }
+  };
 }
 function logarithmicPosition(itemCount, range) {
   const { min, max } = range;
   const logMin = Math.log1p(Math.max(min, 0));
   const logMax = Math.log1p(Math.max(max, 0));
   const logValue = Math.log1p(Math.max(itemCount, 0));
-  return logMax > logMin ? (logValue - logMin) / (logMax - logMin) : 0;
+  return logMax > logMin ? Math.max(0, Math.min(1, (logValue - logMin) / (logMax - logMin))) : 0;
 }
 function calculateNodeDimensions(itemCount, range) {
   const t = logarithmicPosition(itemCount, range);
   return {
-    WIDTH: Math.round(MIN_NODE_WIDTH + t * (MAX_NODE_WIDTH - MIN_NODE_WIDTH)),
-    HEIGHT: Math.round(MIN_NODE_HEIGHT + t * (MAX_NODE_HEIGHT - MIN_NODE_HEIGHT))
+    WIDTH: Math.round(MIN_NODE_WIDTH + t * ((range.maxNodeWidth ?? MAX_NODE_WIDTH) - MIN_NODE_WIDTH)),
+    HEIGHT: Math.round(MIN_NODE_HEIGHT + t * ((range.maxNodeHeight ?? MAX_NODE_HEIGHT) - MIN_NODE_HEIGHT))
   };
 }
 var NODE_MIN_BORDER_WIDTH = 1;
@@ -256,7 +283,7 @@ var NODE_DOT_LABEL_GAP = 6;
 var NODE_LAYOUT_SLOT_RADIUS = 8;
 function calculateNodeDotRadius(itemCount, range) {
   const minArea = NODE_DOT_MIN_RADIUS ** 2;
-  const maxArea = NODE_DOT_MAX_RADIUS ** 2;
+  const maxArea = (range.maxDotRadius ?? NODE_DOT_MAX_RADIUS) ** 2;
   return Math.sqrt(minArea + logarithmicPosition(itemCount, range) * (maxArea - minArea));
 }
 var WHEEL_RADIUS = 260;
@@ -291,19 +318,22 @@ var PAN_MIN_VISIBLE_PX = 80;
 var PAN_ZOOM_SETTLE_MS = 100;
 var DEFAULT_VIEWPORT_CENTER_GUARD_MS = 1e3;
 var INFO_PANEL_WIDTH = 280;
+var INFO_PANEL_SHEET_MAX_WIDTH = 767;
+var INFO_PANEL_SHEET_PEEK_FRACTION = 0.4;
+var INFO_PANEL_SHEET_DRAG_THRESHOLD_PX = 32;
 
 // src/NodeHelper.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function buildTreeHierarchyStructure(d3Lib, nodes) {
   return d3Lib.stratify().id((d) => d.id).parentId((d) => d.parentId)(nodes);
 }
-function calculateLocalRootDimensions(d3Lib, nodes) {
+function calculateLocalRootDimensions(d3Lib, nodes, options = {}) {
   const root = buildTreeHierarchyStructure(d3Lib, nodes);
-  const range = getItemCountRange(root.descendants().map((d) => d.data));
+  const range = getItemCountRange(root.descendants().map((d) => d.data), options);
   return calculateNodeDimensions(root.data.itemCount, range);
 }
-function calculateRootAnchorClearance(d3Lib, nodes, rootItemCount, rootItemCountRange, axis) {
-  const localExtent = calculateLocalRootDimensions(d3Lib, nodes)[axis];
+function calculateRootAnchorClearance(d3Lib, nodes, rootItemCount, rootItemCountRange, axis, options = {}) {
+  const localExtent = calculateLocalRootDimensions(d3Lib, nodes, options)[axis];
   const displayExtent = calculateNodeDimensions(rootItemCount, rootItemCountRange)[axis];
   return (localExtent + displayExtent) / 2;
 }
@@ -387,13 +417,31 @@ function appendPaths(d3Lib, svg, treeData, itemCountRange, orientation = "horizo
 }
 
 // src/tree-renderer.ts
-function calculateSvgDimensions(d3Lib, treeData, orientation = "horizontal", hideRoot = false, depthSpacingScale = 1) {
-  const nodes = treeData.descendants();
-  const itemCountRange = getItemCountRange(nodes.map((d) => d.data));
-  const maxNodeDimensions = { WIDTH: MAX_NODE_WIDTH, HEIGHT: MAX_NODE_HEIGHT };
+function getLayoutSpacings(itemCountRange, depthSpacingScale = 1) {
+  const maxWidth = itemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH;
+  const maxHeight = itemCountRange.maxNodeHeight ?? MAX_NODE_HEIGHT;
+  const verticalSeparation = maxHeight + VERTICAL_SEPARATION_BETWEEN_RECTANGLES;
+  return {
+    horizontalDepth: (maxWidth + ACTIONS_OVERLAY_WIDTH + HORIZONTAL_SEPARATION_BETWEEN_RECTANGLES) * DEPTH_AXIS_SPACING_FACTOR * depthSpacingScale,
+    verticalBreadth: verticalSeparation,
+    verticalDepth: verticalSeparation * 2 * DEPTH_AXIS_SPACING_FACTOR * depthSpacingScale,
+    verticalSibling: maxWidth + HORIZONTAL_SEPARATION_BETWEEN_RECTANGLES
+  };
+}
+function calculateSvgDimensions(d3Lib, treeData, orientation = "horizontal", hideRoot = false, depthSpacingScale = 1, suppliedItemCountRange) {
+  const treeNodes = treeData.descendants();
+  const nodes = treeNodes;
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    treeNodes.map((d) => d.data)
+  );
+  const maxNodeDimensions = {
+    WIDTH: itemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH,
+    HEIGHT: itemCountRange.maxNodeHeight ?? MAX_NODE_HEIGHT
+  };
   const maximumLevel = d3Lib.max(nodes, (d) => d.depth);
-  const depthSeparation = VERTICAL_ORIENTATION_DEPTH_SEPARATION * depthSpacingScale;
-  const depthSeparationHorizontal = HORIZONTAL_SEPARATION_BETWEEN_NODES * depthSpacingScale;
+  const layoutSpacings = getLayoutSpacings(itemCountRange, depthSpacingScale);
+  const depthSeparation = layoutSpacings.verticalDepth;
+  const depthSeparationHorizontal = layoutSpacings.horizontalDepth;
   if (isVerticalOrientation(orientation)) {
     const svgHeight2 = hideRoot ? maximumLevel * depthSeparation : maximumLevel * depthSeparation + maxNodeDimensions.HEIGHT + ACTIONS_OVERLAY_HEIGHT / 2;
     const rootWidth = calculateNodeDimensions(
@@ -455,10 +503,15 @@ function calculateSvgDimensions(d3Lib, treeData, orientation = "horizontal", hid
   const svgWidth = maximumLevel * depthSeparationHorizontal + maxNodeDimensions.WIDTH + ACTIONS_OVERLAY_WIDTH;
   return { svgWidth, svgHeight, highestVerticalCoordinate, rootDepthOffset: 0 };
 }
-function setupTreeLayout(d3Lib, treeData, highestVerticalCoordinate, orientation = "horizontal", rootDepthOffset = 0, svgWidth = 0, depthSpacingScale = 1) {
+function setupTreeLayout(d3Lib, treeData, highestVerticalCoordinate, orientation = "horizontal", rootDepthOffset = 0, svgWidth = 0, depthSpacingScale = 1, suppliedItemCountRange) {
+  const treeNodes = treeData.descendants();
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    treeNodes.map((d) => d.data)
+  );
+  const layoutSpacings = getLayoutSpacings(itemCountRange, depthSpacingScale);
   if (isVerticalOrientation(orientation)) {
     const maximumLevel = d3Lib.max(treeData.descendants(), (d) => d.depth);
-    const depthSeparation = VERTICAL_ORIENTATION_DEPTH_SEPARATION * depthSpacingScale;
+    const depthSeparation = layoutSpacings.verticalDepth;
     treeData.each(function(d) {
       d.x = d.x + highestVerticalCoordinate;
       d.y = depthAxisSign(orientation) === -1 ? (maximumLevel - d.depth) * depthSeparation : d.depth * depthSeparation + rootDepthOffset;
@@ -480,24 +533,30 @@ function setupTreeLayout(d3Lib, treeData, highestVerticalCoordinate, orientation
   });
   return treeData;
 }
-function createTreeLayout(d3Lib, root, orientation = "horizontal", depthSpacingScale = 1) {
+function createTreeLayout(d3Lib, root, orientation = "horizontal", depthSpacingScale = 1, suppliedItemCountRange) {
+  const nodes = root.descendants();
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    nodes.map((d) => d.data)
+  );
+  const layoutSpacings = getLayoutSpacings(itemCountRange, depthSpacingScale);
   const nodeSize = isVerticalOrientation(orientation) ? [
-    SIBLING_SEPARATION_BETWEEN_NODES,
-    VERTICAL_ORIENTATION_DEPTH_SEPARATION * depthSpacingScale
+    layoutSpacings.verticalSibling,
+    layoutSpacings.verticalDepth
   ] : [
-    VERTICAL_SEPARATION_BETWEEN_NODES,
-    HORIZONTAL_SEPARATION_BETWEEN_NODES * depthSpacingScale
+    layoutSpacings.verticalBreadth,
+    layoutSpacings.horizontalDepth
   ];
   const treeLayout = d3Lib.tree().nodeSize(nodeSize).separation(() => 1);
   return treeLayout(root);
 }
-function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNodeId, reparentForbiddenIds, rootColor, callbacks, orientation = "horizontal", hideRoot = false, selectedNodeId = null) {
+function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNodeId, reparentForbiddenIds, rootColor, callbacks, orientation = "horizontal", hideRoot = false, selectedNodeId = null, suppliedItemCountRange) {
   const { onReparentTargetSelect, onNodeClick } = callbacks;
   if (!svgRef.current) {
     throw new Error("SVG reference is null");
   }
-  const itemCountRange = getItemCountRange(
-    treeData.descendants().map((d) => d.data)
+  const treeNodes = treeData.descendants();
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    treeNodes.map((d) => d.data)
   );
   const svg = d3Lib.select(svgRef.current).append("svg").attr("width", svgWidth).attr("height", svgHeight).style("overflow", "visible").append("g");
   const safeRootId = treeData.data.id.replace(/[^a-zA-Z0-9_-]/g, "_");
@@ -645,7 +704,7 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
 }
 
 // src/FloatingControls.tsx
-var import_md = require("react-icons/md");
+var import_ui = require("@behindthemusictree/ui");
 
 // src/BusyIndicator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -658,7 +717,7 @@ function BusyIndicator() {
 
 // src/FloatingControls.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
+function FloatingControls({ panZoom, onFit, orientation, zoomControls, leading, busy }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -669,31 +728,18 @@ function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
       children: [
         busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BusyIndicator, {}),
         leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gtv-floating-controls-leading", children: leading }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gtv-zoom-controls", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "button",
-              className: ["gtv-zoom-btn", !panZoom.canZoomIn && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
-              disabled: !panZoom.canZoomIn,
-              onClick: panZoom.zoomIn,
-              "aria-label": "Zoom in",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdZoomIn, { className: "gtv-icon", size: 18 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "button",
-              className: ["gtv-zoom-btn", !panZoom.canZoomOut && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
-              disabled: !panZoom.canZoomOut,
-              onClick: panZoom.zoomOut,
-              "aria-label": "Zoom out",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdZoomOut, { className: "gtv-icon", size: 18 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "gtv-zoom-btn", onClick: onFit, "aria-label": "Fit to frame", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdFitScreen, { className: "gtv-icon", size: 18 }) })
-        ] })
+        zoomControls !== "never" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_ui.ZoomControls,
+          {
+            onZoomIn: panZoom.zoomIn,
+            onZoomOut: panZoom.zoomOut,
+            onFit,
+            canZoomIn: panZoom.canZoomIn,
+            canZoomOut: panZoom.canZoomOut,
+            orientation,
+            className: zoomControls === "auto" ? "gtv-zoom-controls gtv-zoom-controls--auto" : "gtv-zoom-controls"
+          }
+        )
       ]
     }
   );
@@ -757,6 +803,18 @@ function computeFitScale(contentWidth, contentHeight, viewportWidth, viewportHei
   );
 }
 
+// src/info-panel-geometry.ts
+function resolveInfoPanelSide() {
+  return "left";
+}
+function resolveInfoPanelObscuredArea(element, viewport, panelWidth) {
+  if (!element || !viewport) return null;
+  if (viewport.clientWidth > 0 && viewport.clientWidth <= INFO_PANEL_SHEET_MAX_WIDTH) {
+    return { side: "bottom", height: viewport.clientHeight * INFO_PANEL_SHEET_PEEK_FRACTION };
+  }
+  return { width: panelWidth, side: resolveInfoPanelSide() };
+}
+
 // src/use-pan-zoom.ts
 function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   const [panX, setPanX] = (0, import_react.useState)(0);
@@ -767,6 +825,17 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   const settleTimerRef = (0, import_react.useRef)(null);
   const stageAnimationRef = (0, import_react.useRef)(null);
   const defaultViewportRef = (0, import_react.useRef)(options.defaultViewport);
+  const operationRef = (0, import_react.useRef)(0);
+  const restoredSelectionRef = (0, import_react.useRef)(void 0);
+  const restoredRevisionRef = (0, import_react.useRef)(void 0);
+  const restoredFrameRef = (0, import_react.useRef)(void 0);
+  const pendingRestoreRef = (0, import_react.useRef)(null);
+  const measuredFrameRef = (0, import_react.useRef)(void 0);
+  const fittedFrameRef = (0, import_react.useRef)(null);
+  const frameElementsRef = (0, import_react.useRef)([]);
+  const retryFrameRef = (0, import_react.useRef)(() => {
+  });
+  const pendingCenterRef = (0, import_react.useRef)(null);
   const centerGuardUntilRef = (0, import_react.useRef)(0);
   const onViewportChangeRef = (0, import_react.useRef)(options.onViewportChange);
   (0, import_react.useEffect)(() => {
@@ -840,6 +909,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [viewportRef]);
   const zoomAtPoint = (0, import_react.useCallback)(
     (computeNewScale, clientX, clientY) => {
+      operationRef.current += 1;
       const viewport = viewportRef.current;
       if (!viewport) {
         return;
@@ -923,19 +993,26 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     const viewport = viewportRef.current;
     if (!viewport) return;
     const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
+      const entry = entries?.[0];
+      if (!entry) {
+        retryFrameRef.current();
+        return;
+      }
       const { width, height } = entry.contentRect;
       const previous = viewportSizeRef.current;
       viewportSizeRef.current = { width, height };
-      if (!previous) return;
+      if (!previous || previous.width <= 0 || previous.height <= 0) {
+        retryFrameRef.current();
+        return;
+      }
       const dx = (width - previous.width) / 2;
       const dy = (height - previous.height) / 2;
       if (dx === 0 && dy === 0) return;
       const view = viewRef.current;
       view.x = clampPanAxis(view.x + dx, view.k, "x");
       view.y = clampPanAxis(view.y + dy, view.k, "y");
-      commitView();
+      commitView(false);
+      retryFrameRef.current();
     });
     observer.observe(viewport);
     return () => observer.disconnect();
@@ -946,6 +1023,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       return;
     }
     const handleWheel = (event) => {
+      operationRef.current += 1;
       if (event.target.closest(".gtv-info-panel") !== null) {
         return;
       }
@@ -984,6 +1062,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [viewportRef, wheelZoom]);
   const zoomByButton = (0, import_react.useCallback)(
     (direction) => {
+      operationRef.current += 1;
       const viewport = viewportRef.current;
       if (!viewport) return;
       const rect = viewport.getBoundingClientRect();
@@ -998,13 +1077,14 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   );
   const fitToFrame = (0, import_react.useCallback)(
     (elements, { silent = false } = {}) => {
+      if (!silent) operationRef.current += 1;
+      frameElementsRef.current = elements;
       const viewport = viewportRef.current;
       const present = elements.filter((el) => Boolean(el));
-      if (!viewport || present.length === 0) return;
+      if (!viewport || present.length === 0) return false;
       const viewportRect = viewport.getBoundingClientRect();
-      if (viewportRect.width <= 0 || viewportRect.height <= 0) return;
-      centerAnimationRef.current = null;
-      if (viewportRect.width <= ZOOM_FIT_PADDING * 2 || viewportRect.height <= ZOOM_FIT_PADDING * 2) return;
+      if (viewportRect.width <= 0 || viewportRect.height <= 0) return false;
+      if (viewportRect.width <= ZOOM_FIT_PADDING * 2 || viewportRect.height <= ZOOM_FIT_PADDING * 2) return false;
       const rects = present.map((el) => el.getBoundingClientRect());
       const contentLeft = Math.min(...rects.map((r) => r.left));
       const contentTop = Math.min(...rects.map((r) => r.top));
@@ -1013,7 +1093,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       const view = viewRef.current;
       const contentWidth = (contentRight - contentLeft) / view.k;
       const contentHeight = (contentBottom - contentTop) / view.k;
-      if (contentWidth <= 0 || contentHeight <= 0) return;
+      if (contentWidth <= 0 || contentHeight <= 0) return false;
       const contentOriginX = (contentLeft - viewportRect.left - view.x) / view.k;
       const contentOriginY = (contentTop - viewportRect.top - view.y) / view.k;
       contentBoundsRef.current = {
@@ -1032,6 +1112,41 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       const newMinScale = Math.min(ZOOM_MIN_SCALE, fitScale);
       minScaleRef.current = newMinScale;
       setMinScale(newMinScale);
+      measuredFrameRef.current = options.frameKey;
+      const pending = pendingRestoreRef.current;
+      if (pending && pending.operation !== operationRef.current) {
+        pendingRestoreRef.current = null;
+        pendingCenterRef.current = null;
+        fittedFrameRef.current = { frame: options.frameKey };
+        return true;
+      }
+      if (pending && pending.frame === options.frameKey && pending.operation === operationRef.current) {
+        pendingRestoreRef.current = null;
+        restoredRevisionRef.current = pending.revision;
+        restoredFrameRef.current = pending.frame;
+        restoredSelectionRef.current = options.selectedNodeId;
+        defaultViewportRef.current = void 0;
+        viewRef.current = viewportToView({ ...pending.viewport, zoom: clampZoomScale(pending.viewport.zoom, newMinScale) }, viewportRect.width, viewportRect.height);
+        fittedFrameRef.current = { frame: options.frameKey };
+        pendingCenterRef.current = null;
+        commitView(false);
+        return true;
+      }
+      if (silent && fittedFrameRef.current && fittedFrameRef.current.frame === options.frameKey) {
+        const center2 = pendingCenterRef.current;
+        pendingCenterRef.current = null;
+        center2?.();
+        return true;
+      }
+      fittedFrameRef.current = { frame: options.frameKey };
+      const center = pendingCenterRef.current;
+      pendingCenterRef.current = null;
+      if (silent && center && !defaultViewportRef.current) {
+        center();
+        return true;
+      }
+      zoomAnimationRef.current = null;
+      centerAnimationRef.current = null;
       const seed = defaultViewportRef.current;
       if (seed) {
         defaultViewportRef.current = void 0;
@@ -1045,14 +1160,15 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
         view.y = seeded.y;
         centerGuardUntilRef.current = performance.now() + DEFAULT_VIEWPORT_CENTER_GUARD_MS;
         commitView(false);
-        return;
+        return true;
       }
       view.k = fitScale;
       view.x = viewportRect.width / 2 - (contentOriginX + contentWidth / 2) * fitScale;
       view.y = viewportRect.height / 2 - (contentOriginY + contentHeight / 2) * fitScale;
       commitView(!silent);
+      return true;
     },
-    [viewportRef, commitView]
+    [viewportRef, commitView, options.frameKey, options.selectedNodeId]
   );
   const centerAnimationRef = (0, import_react.useRef)(null);
   const centerAnimationFrameIdRef = (0, import_react.useRef)(null);
@@ -1086,7 +1202,19 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     stepCenterAnimationRef.current = stepCenterAnimation;
   }, [stepCenterAnimation]);
   const centerOnElement = (0, import_react.useCallback)(
-    (element, targetScale, obscured) => {
+    (element, targetScale, obscured, automatic = false) => {
+      if (automatic && restoredRevisionRef.current !== void 0 && restoredFrameRef.current === options.frameKey && restoredSelectionRef.current === options.selectedNodeId) return;
+      if (!automatic) operationRef.current += 1;
+      const viewportSize = viewportRef.current?.getBoundingClientRect();
+      if (automatic && (measuredFrameRef.current !== options.frameKey || fittedFrameRef.current === null || !viewportSize?.width || !viewportSize.height)) {
+        const operation = operationRef.current;
+        pendingCenterRef.current = () => {
+          if (operation !== operationRef.current) return;
+          const currentElement = element?.id ? viewportRef.current?.querySelector(`#${CSS.escape(element.id)}`) : element;
+          centerLatestRef.current(currentElement, targetScale, obscured ? resolveInfoPanelObscuredArea(currentElement, viewportRef.current, INFO_PANEL_WIDTH) : obscured, true);
+        };
+        return;
+      }
       const viewport = viewportRef.current;
       if (!viewport || !element || performance.now() < centerGuardUntilRef.current) return;
       const viewportRect = viewport.getBoundingClientRect();
@@ -1097,9 +1225,10 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       const newScale = clampZoomScale(Math.max(targetScale, currentScale), minScaleRef.current);
       const centerX = (rect.left + rect.width / 2 - viewportRect.left - view.x) / currentScale;
       const centerY = (rect.top + rect.height / 2 - viewportRect.top - view.y) / currentScale;
-      const availableCenterX = !obscured ? viewportRect.width / 2 : obscured.side === "left" ? obscured.width + (viewportRect.width - obscured.width) / 2 : (viewportRect.width - obscured.width) / 2;
+      const availableCenterX = obscured?.side === "left" ? obscured.width + (viewportRect.width - obscured.width) / 2 : obscured?.side === "right" ? (viewportRect.width - obscured.width) / 2 : viewportRect.width / 2;
+      const availableCenterY = obscured?.side === "bottom" ? (viewportRect.height - obscured.height) / 2 : viewportRect.height / 2;
       const targetPanX = availableCenterX - centerX * newScale;
-      const targetPanY = viewportRect.height / 2 - centerY * newScale;
+      const targetPanY = availableCenterY - centerY * newScale;
       zoomAnimationRef.current = null;
       if (animationFrameIdRef.current !== null) {
         cancelAnimationFrame(animationFrameIdRef.current);
@@ -1118,8 +1247,17 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
         centerAnimationFrameIdRef.current = requestAnimationFrame(() => stepCenterAnimationRef.current());
       }
     },
-    [viewportRef]
+    [viewportRef, options.frameKey, options.selectedNodeId]
   );
+  const centerLatestRef = (0, import_react.useRef)(centerOnElement);
+  (0, import_react.useEffect)(() => {
+    centerLatestRef.current = centerOnElement;
+  }, [centerOnElement]);
+  (0, import_react.useEffect)(() => {
+    retryFrameRef.current = () => {
+      fitToFrame(frameElementsRef.current, { silent: true });
+    };
+  }, [fitToFrame]);
   const lastPointRef = (0, import_react.useRef)({ x: 0, y: 0 });
   const minScaleRef = (0, import_react.useRef)(minScale);
   const suppressedPointersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
@@ -1194,6 +1332,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [handlePointerUp]);
   const handlePointerDown = (0, import_react.useCallback)((event) => {
     if (event.button !== 0) return;
+    operationRef.current += 1;
     const isInteractive = event.target.closest("g.node, foreignObject, .gtv-zoom-controls, .gtv-wheel-chip, .gtv-info-panel") !== null;
     const isPageScrollTouch = wheelZoom === "modifier" && event.pointerType === "touch";
     const pointers = activePointersRef.current;
@@ -1212,6 +1351,42 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       window.addEventListener("pointercancel", stablePointerUp);
     }
   }, [stablePointerMove, stablePointerUp, wheelZoom]);
+  const restore = options.viewportRestore;
+  const restoreRevision = restore?.revision;
+  const restoreX = restore?.viewport.x;
+  const restoreY = restore?.viewport.y;
+  const restoreZoom = restore?.viewport.zoom;
+  (0, import_react.useEffect)(() => {
+    if (restoreRevision === restoredRevisionRef.current || restoreRevision === void 0 || restoreX === void 0 || restoreY === void 0 || restoreZoom === void 0) return;
+    if (!Number.isFinite(restoreX) || !Number.isFinite(restoreY) || !Number.isFinite(restoreZoom) || restoreZoom <= 0) return;
+    const viewportElement = viewportRef.current;
+    if (!viewportElement) return;
+    restoredRevisionRef.current = restoreRevision;
+    const operation = ++operationRef.current;
+    zoomAnimationRef.current = null;
+    centerAnimationRef.current = null;
+    if (animationFrameIdRef.current !== null) cancelAnimationFrame(animationFrameIdRef.current);
+    if (centerAnimationFrameIdRef.current !== null) cancelAnimationFrame(centerAnimationFrameIdRef.current);
+    if (frameIdRef.current !== null) cancelAnimationFrame(frameIdRef.current);
+    if (settleTimerRef.current !== null) clearTimeout(settleTimerRef.current);
+    animationFrameIdRef.current = null;
+    centerAnimationFrameIdRef.current = null;
+    frameIdRef.current = null;
+    settleTimerRef.current = null;
+    activePointersRef.current.clear();
+    suppressedPointersRef.current.clear();
+    pinchStartRef.current = null;
+    window.removeEventListener("pointermove", stablePointerMove);
+    window.removeEventListener("pointerup", stablePointerUp);
+    window.removeEventListener("pointercancel", stablePointerUp);
+    pendingRestoreRef.current = {
+      viewport: { x: restoreX, y: restoreY, zoom: restoreZoom },
+      revision: restoreRevision,
+      frame: options.frameKey,
+      operation
+    };
+    if (measuredFrameRef.current === options.frameKey) retryFrameRef.current();
+  }, [restoreRevision, restoreX, restoreY, restoreZoom, options.frameKey, options.selectedNodeId, viewportRef, commitView, stablePointerMove, stablePointerUp]);
   (0, import_react.useEffect)(() => {
     const pointers = activePointersRef.current;
     const suppressed = suppressedPointersRef.current;
@@ -1246,17 +1421,6 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
 
 // src/use-node-info-panel.ts
 var import_react2 = require("react");
-
-// src/info-panel-geometry.ts
-function resolveInfoPanelSide() {
-  return "left";
-}
-function resolveInfoPanelObscuredArea(element, viewport, panelWidth) {
-  if (!element || !viewport) return null;
-  return { width: panelWidth, side: resolveInfoPanelSide() };
-}
-
-// src/use-node-info-panel.ts
 function useNodeInfoPanel({
   selectedNodeId,
   onSelectedNodeChange
@@ -1265,7 +1429,7 @@ function useNodeInfoPanel({
   const [prevSelectedNodeId, setPrevSelectedNodeId] = (0, import_react2.useState)(selectedNodeId);
   if (selectedNodeId !== prevSelectedNodeId) {
     setPrevSelectedNodeId(selectedNodeId);
-    if (prevSelectedNodeId != null && selectedNodeId == null) setPanel(null);
+    if (prevSelectedNodeId !== void 0) setPanel(null);
   }
   const shownNodeIdRef = (0, import_react2.useRef)(null);
   const onSelectedNodeChangeRef = (0, import_react2.useRef)(onSelectedNodeChange);
@@ -1275,20 +1439,32 @@ function useNodeInfoPanel({
   });
   const showNodeInfo = (0, import_react2.useCallback)(
     (node, element, viewport, { notify = true } = {}) => {
+      if (notify && selectedNodeId !== void 0) {
+        if (node.id !== selectedNodeId) onSelectedNodeChangeRef.current?.(node);
+        return;
+      }
       if (!element || !viewport) return;
       setPanel({ node, side: resolveInfoPanelSide() });
       const changed = node.id !== shownNodeIdRef.current;
       shownNodeIdRef.current = node.id;
       if (changed && notify) onSelectedNodeChangeRef.current?.(node);
     },
-    []
+    [selectedNodeId]
   );
   const closeNodeInfo = (0, import_react2.useCallback)(() => {
+    if (selectedNodeId !== void 0) {
+      if (selectedNodeId !== null) onSelectedNodeChangeRef.current?.(null);
+      return;
+    }
     setPanel(null);
     shownNodeIdRef.current = null;
     onSelectedNodeChangeRef.current?.(null);
-  }, []);
-  return { panel, showNodeInfo, closeNodeInfo };
+  }, [selectedNodeId]);
+  return {
+    panel: selectedNodeId !== void 0 && panel?.node.id !== selectedNodeId ? null : panel,
+    showNodeInfo,
+    closeNodeInfo
+  };
 }
 
 // src/use-tree-index.ts
@@ -1335,10 +1511,10 @@ function useTreeIndex(nodes) {
 
 // src/InfoPanel.tsx
 var import_react6 = require("react");
-var import_md5 = require("react-icons/md");
+var import_md4 = require("react-icons/md");
 
 // src/InfoPanelExpandButton.tsx
-var import_md2 = require("react-icons/md");
+var import_md = require("react-icons/md");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1349,14 +1525,14 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
       style,
       onClick: () => onExpandedChange(!expanded),
       "aria-label": expanded ? "Collapse panel" : "Expand panel",
-      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md2.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md2.MdOpenInFull, { className: "gtv-icon", size: 16 })
+      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdOpenInFull, { className: "gtv-icon", size: 16 })
     }
   );
 }
 
 // src/InfoPanelSection.tsx
 var import_react4 = require("react");
-var import_md3 = require("react-icons/md");
+var import_md2 = require("react-icons/md");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function InfoPanelSection({ title, children }) {
   const [open, setOpen] = (0, import_react4.useState)(true);
@@ -1370,7 +1546,7 @@ function InfoPanelSection({ title, children }) {
         onClick: () => setOpen((isOpen) => !isOpen),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-children-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md3.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md2.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
         ]
       }
     ),
@@ -1380,7 +1556,7 @@ function InfoPanelSection({ title, children }) {
 
 // src/NodeToolbar.tsx
 var import_react5 = require("react");
-var import_md4 = require("react-icons/md");
+var import_md3 = require("react-icons/md");
 var import_fa = require("react-icons/fa");
 var import_pi2 = require("react-icons/pi");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1458,7 +1634,7 @@ function NodeToolbar({
             "aria-haspopup": "menu",
             "aria-expanded": menuOpen,
             onClick: () => setMenuOpen((open) => !open),
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md4.MdMoreVert, { size: "0.6em" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md3.MdMoreVert, { size: "0.6em" })
           }
         ),
         menuOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
@@ -1472,7 +1648,7 @@ function NodeToolbar({
                 onRenameRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md4.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md3.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Rename" })
               ]
             }
@@ -1574,6 +1750,27 @@ function InfoPanel({
   hideExpandButton = false
 }) {
   const panelRef = (0, import_react6.useRef)(null);
+  const [sheetFull, setSheetFull] = (0, import_react6.useState)(false);
+  const grabberDragRef = (0, import_react6.useRef)(null);
+  const onGrabberPointerDown = (event) => {
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    grabberDragRef.current = { startY: event.clientY, dragged: false };
+  };
+  const onGrabberPointerUp = (event) => {
+    const drag = grabberDragRef.current;
+    if (!drag) return;
+    const dy = event.clientY - drag.startY;
+    if (Math.abs(dy) < INFO_PANEL_SHEET_DRAG_THRESHOLD_PX) return;
+    drag.dragged = true;
+    if (dy < 0) setSheetFull(true);
+    else if (sheetFull) setSheetFull(false);
+    else if (!hideClose) onClose();
+  };
+  const onGrabberClick = () => {
+    const dragged = grabberDragRef.current?.dragged ?? false;
+    grabberDragRef.current = null;
+    if (!dragged) setSheetFull((full) => !full);
+  };
   (0, import_react6.useEffect)(() => {
     panelRef.current?.toggleAttribute("inert", collapsed);
   }, [collapsed]);
@@ -1676,9 +1873,21 @@ function InfoPanel({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: `gtv-info-panel gtv-info-panel--${side}${expanded ? " gtv-info-panel--expanded" : ""}${expanded && !hasAside ? " gtv-info-panel--expanded-solo" : ""}${collapsed ? " gtv-info-panel--collapsed" : ""}`,
+      className: `gtv-info-panel gtv-info-panel--sheet${sheetFull ? " gtv-info-panel--sheet-full" : ""} gtv-info-panel--${side}${expanded ? " gtv-info-panel--expanded" : ""}${expanded && !hasAside ? " gtv-info-panel--expanded-solo" : ""}${collapsed ? " gtv-info-panel--collapsed" : ""}`,
       ref: panelRef,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "gtv-info-panel-grabber",
+            "aria-label": sheetFull ? "Lower panel" : "Raise panel",
+            "aria-expanded": sheetFull,
+            onPointerDown: onGrabberPointerDown,
+            onPointerUp: onGrabberPointerUp,
+            onClick: onGrabberClick
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
@@ -1694,7 +1903,7 @@ function InfoPanel({
                   onClick: onPrevious,
                   "aria-label": previousLabel ? `Previous: ${previousLabel}` : "Previous",
                   title: previousLabel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdArrowBack, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdArrowBack, { className: "gtv-icon", size: 16 })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1717,7 +1926,7 @@ function InfoPanel({
                   onClick: onZoomIn,
                   "aria-label": "Zoom in",
                   title: "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdZoomIn, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdZoomIn, { className: "gtv-icon", size: 16 })
                 }
               ),
               onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
@@ -1729,7 +1938,7 @@ function InfoPanel({
                   style: { color: textColor },
                   onClick: onClose,
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdClose, { className: "gtv-icon", size: 16 })
                 }
               )
             ]
@@ -1753,7 +1962,7 @@ function InfoPanel({
 
 // src/OverlayPanel.tsx
 var import_react7 = require("react");
-var import_md6 = require("react-icons/md");
+var import_md5 = require("react-icons/md");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function OverlayPanel({
   title,
@@ -1793,7 +2002,7 @@ function OverlayPanel({
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-info-panel-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
       onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange }),
-      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md6.MdClose, { className: "gtv-icon", size: 16 }) })
+      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-info-panel-body", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
@@ -1830,6 +2039,8 @@ function GenreTree({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -1839,8 +2050,10 @@ function GenreTree({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy
 }) {
@@ -1848,8 +2061,13 @@ function GenreTree({
   const svgRef = (0, import_react8.useRef)(null);
   const viewportRef = (0, import_react8.useRef)(null);
   const stageRef = (0, import_react8.useRef)(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react8.useMemo)(() => JSON.stringify([orientation, nodes.map(({ id, parentId, side }) => [id, parentId, side])]), [nodes, orientation]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId: selectedNodeIdProp, onViewportChange, frameKey: viewportFrame });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId: selectedNodeIdProp, onSelectedNodeChange });
+  const itemCountRange = (0, import_react8.useMemo)(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: nodeCountForSizing ?? nodes.length }),
+    [nodes, itemCountScaleMax, nodeCountForSizing]
+  );
   const showNodeInfoRef = (0, import_react8.useRef)(showNodeInfo);
   (0, import_react8.useEffect)(() => {
     showNodeInfoRef.current = showNodeInfo;
@@ -1864,7 +2082,8 @@ function GenreTree({
       d3,
       root,
       orientation,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const {
       svgWidth: width,
@@ -1876,7 +2095,8 @@ function GenreTree({
       originalTreeData,
       orientation,
       hideRoot,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const reshapedTreeData = setupTreeLayout(
       d3,
@@ -1885,7 +2105,8 @@ function GenreTree({
       orientation,
       rootDepthOffset,
       width,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     return {
       treeData: reshapedTreeData,
@@ -1893,7 +2114,7 @@ function GenreTree({
       svgWidth: width,
       svgHeight: height
     };
-  }, [nodes, rootColor, orientation, hideRoot, depthSpacingScale]);
+  }, [nodes, rootColor, orientation, hideRoot, depthSpacingScale, itemCountRange]);
   const reparentForbiddenIds = (0, import_react8.useMemo)(() => {
     if (!reparentingNodeId) return [];
     const reparentingHierarchyNode = treeData.descendants().find((d) => d.data.id === reparentingNodeId);
@@ -1944,7 +2165,8 @@ function GenreTree({
       },
       orientation,
       hideRoot,
-      effectiveSelectedNodeId
+      effectiveSelectedNodeId,
+      itemCountRange
     );
   }, [
     treeData,
@@ -1965,7 +2187,8 @@ function GenreTree({
     additionalActions,
     orientation,
     hideRoot,
-    effectiveSelectedNodeId
+    effectiveSelectedNodeId,
+    itemCountRange
   ]);
   (0, import_react8.useEffect)(() => {
     if (!interactive || !selectedNodeIdProp) return;
@@ -1978,7 +2201,8 @@ function GenreTree({
     centerOnElementRef.current(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfoRef.current(targetNode, element, viewportRef.current, { notify: false });
   }, [interactive, selectedNodeIdProp, index, panel]);
@@ -1990,12 +2214,10 @@ function GenreTree({
       }
     };
   }, []);
-  const hasInitialFitRef = (0, import_react8.useRef)(false);
   (0, import_react8.useEffect)(() => {
-    if (hasInitialFitRef.current || !interactive) return;
+    if (!interactive) return;
     const elements = queryTreeContentElements(svgRef.current);
     if (elements.length === 0) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const svg = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -2126,6 +2348,7 @@ function GenreTree({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
@@ -2238,6 +2461,8 @@ function WheelCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -2247,12 +2472,19 @@ function WheelCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   selectedNodeId
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
+  const wheelSizeRange = (0, import_react9.useMemo)(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, itemCountScaleMax, fullNodeCountForSizing]
+  );
   const treeOrientation = direction === "left" ? "horizontal-anchored" : "vertical";
   const landingAngle = direction === "left" ? 90 : 0;
   const chipHalfExtentVar = direction === "left" ? "--gtv-wheel-chip-half-width" : "--gtv-wheel-chip-half-height";
@@ -2262,10 +2494,10 @@ function WheelCore({
     return getGenreTreeColor(nodes.find((n) => n.id === rootId)?.wikidataId);
   };
   const wheelRadius = (0, import_react9.useMemo)(
-    () => calculateWheelRadius(groups.length, MAX_NODE_WIDTH, WHEEL_RADIUS),
-    [groups.length]
+    () => calculateWheelRadius(groups.length, wheelSizeRange.maxNodeWidth ?? MAX_NODE_WIDTH, WHEEL_RADIUS),
+    [groups.length, wheelSizeRange.maxNodeWidth]
   );
-  const wheelViewportHeight = wheelRadius * 2 + MAX_NODE_HEIGHT / 2;
+  const wheelViewportHeight = wheelRadius * 2 + (wheelSizeRange.maxNodeHeight ?? MAX_NODE_HEIGHT) / 2;
   const rootItemCountById = (0, import_react9.useMemo)(
     () => new Map(groups.map((group) => [group.root.id, group.root.itemCount])),
     [groups]
@@ -2282,7 +2514,8 @@ function WheelCore({
   );
   const viewportRef = (0, import_react9.useRef)(null);
   const stageRef = (0, import_react9.useRef)(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react9.useMemo)(() => JSON.stringify(nodes.map(({ id, parentId, side }) => [id, parentId, side])), [nodes]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const wheelCircleRef = (0, import_react9.useRef)(null);
   const treeAnchorRef = (0, import_react9.useRef)(null);
@@ -2296,15 +2529,12 @@ function WheelCore({
   (0, import_react9.useEffect)(() => {
     if (effectiveRootId) onRootSelectRef.current?.(effectiveRootId);
   }, [effectiveRootId]);
-  const hasInitialFitRef = (0, import_react9.useRef)(false);
   (0, import_react9.useEffect)(() => {
-    if (hasInitialFitRef.current) return;
     const elements = [
       wheelCircleRef.current,
       ...queryTreeContentElements(treeAnchorRef.current)
     ];
     if (!elements.some(Boolean)) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const selectedGroup = groups.find((group) => group.root.id === effectiveRootId) ?? null;
@@ -2312,16 +2542,18 @@ function WheelCore({
     () => getItemCountRange(
       groups.map((group) => ({
         itemCount: rootItemCountById.get(group.root.id)
-      }))
+      })),
+      { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
     ),
-    [groups, rootItemCountById]
+    [groups, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
   );
   const rootChipHalfExtent = selectedGroup ? calculateRootAnchorClearance(
     d32,
     selectedGroup.nodes,
     rootItemCountById.get(selectedGroup.root.id),
     rootItemCountRange,
-    direction === "left" ? "WIDTH" : "HEIGHT"
+    direction === "left" ? "WIDTH" : "HEIGHT",
+    { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
   ) : 0;
   const sectorFillGradient = (0, import_react9.useMemo)(
     () => buildWheelSectorGradient(
@@ -2362,7 +2594,8 @@ function WheelCore({
     panZoom.centerOnElement(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, effectiveRootId, nodes, panel, showNodeInfo]);
@@ -2411,6 +2644,8 @@ function WheelCore({
                     {
                       nodes: selectedGroup.nodes,
                       itemCountLabel,
+                      itemCountScaleMax,
+                      nodeCountForSizing: fullNodeCountForSizing,
                       orientation: treeOrientation,
                       hideRoot: true,
                       interactive: false,
@@ -2622,6 +2857,7 @@ function WheelCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -2654,18 +2890,32 @@ var d33 = __toESM(require("d3"), 1);
 // src/defer-click.ts
 function createDeferredClick() {
   let timeoutId = null;
+  let pendingKey = void 0;
+  let doubledAt = -Infinity;
   const cancel = () => {
     if (timeoutId !== null) clearTimeout(timeoutId);
     timeoutId = null;
   };
-  const schedule = (action) => {
+  const schedule = (action, onDouble, key) => {
+    if (onDouble && timeoutId !== null && key === pendingKey) {
+      cancel();
+      doubledAt = Date.now();
+      onDouble();
+      return;
+    }
     cancel();
+    pendingKey = key;
     timeoutId = setTimeout(() => {
       timeoutId = null;
       action();
     }, DOUBLE_CLICK_DELAY_MS);
   };
-  return { schedule, cancel };
+  const doubleClick = (onDouble) => {
+    cancel();
+    if (Date.now() - doubledAt < DOUBLE_CLICK_DELAY_MS) return;
+    onDouble();
+  };
+  return { schedule, cancel, doubleClick };
 }
 
 // src/radial-wheel-geometry.ts
@@ -2855,13 +3105,15 @@ function calculatePopSubtreeRadialExtent(hierarchy, coreRootCircleRadius = 0) {
     POP_TREE_DEPTH_RADIAL_SPACING
   ) + MAX_NODE_WIDTH / 2 + POP_SUBTREE_OUTER_MARGIN;
 }
-function computePopRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, coreRootCircleRadius, wedgeSpanDegrees = POP_WEDGE_SPAN_DEGREES, depthSpacing = POP_TREE_DEPTH_RADIAL_SPACING) {
+function computePopRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, coreRootCircleRadius, wedgeSpanDegrees = POP_WEDGE_SPAN_DEGREES, depthSpacing = POP_TREE_DEPTH_RADIAL_SPACING, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
-    popRadiusOfDepth(coreRootCircleRadius, depthSpacing)
+    popRadiusOfDepth(coreRootCircleRadius, depthSpacing),
+    "center",
+    dotRadius
   );
 }
 var MIN_DOT_GAP = 5.6;
@@ -2871,15 +3123,15 @@ function popRadiusOfDepth(coreRootCircleRadius, depthSpacing) {
 function coreRadiusOfDepth(coreRootCircleRadius, depthSpacing) {
   return (depth) => getRadialDepthRadius(depth + 1, coreRootCircleRadius, depthSpacing);
 }
-function measureWedge(_d3Lib, hierarchy, radiusOfDepth) {
-  const dotRadius = () => NODE_LAYOUT_SLOT_RADIUS;
+function measureWedge(_d3Lib, hierarchy, radiusOfDepth, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
+  const slotRadius = () => dotRadius;
   const offsetFromParent = /* @__PURE__ */ new Map();
   const shiftLevel = (level, by) => ({
     left: { ...level.left, x: level.left.x + by },
     right: { ...level.right, x: level.right.x + by }
   });
   const pack = (node) => {
-    const own = { x: 0, dotRadius: dotRadius() };
+    const own = { x: 0, dotRadius: slotRadius() };
     if (!node.children) return [{ left: own, right: own }];
     const below = [];
     const childOffsets = [];
@@ -2911,7 +3163,7 @@ function measureWedge(_d3Lib, hierarchy, radiusOfDepth) {
   let min = Infinity;
   let max = -Infinity;
   hierarchy.each((d) => {
-    const inset = (dotRadius() + MIN_DOT_GAP / 2) / radiusOfDepth(d.depth);
+    const inset = (slotRadius() + MIN_DOT_GAP / 2) / radiusOfDepth(d.depth);
     min = Math.min(min, d.x - inset);
     max = Math.max(max, d.x + inset);
   });
@@ -2931,8 +3183,8 @@ function splitAtBranching(hierarchy) {
   const children = branching.children;
   return children && children.length > 1 ? { chain, branching, children } : null;
 }
-function layoutWedge(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, radiusOfDepth, slack = "center") {
-  const neededRad = measureWedge(d3Lib, hierarchy, radiusOfDepth);
+function layoutWedge(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, radiusOfDepth, slack = "center", dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
+  const neededRad = measureWedge(d3Lib, hierarchy, radiusOfDepth, dotRadius);
   const wedgeSpanRad = wedgeSpanDegrees * Math.PI / 180;
   const scale = Math.min(MAX_WEDGE_STRETCH, wedgeSpanRad / neededRad);
   const wedgeCenterRad = wedgeCenterAngleDegrees * Math.PI / 180;
@@ -3161,12 +3413,12 @@ function renderPopSubtree(d3Lib, svg, hierarchy, rootColor, reparentingNodeId, r
     group.on("click", (event) => {
       if (reparentingNodeId) return;
       const element = event.currentTarget;
-      deferredClick.schedule(() => onNodeClick?.(d.data, event, element));
-    });
-    group.on("dblclick", () => {
-      deferredClick.cancel();
-      onNodeDoubleClick?.(d.data);
+      deferredClick.schedule(
+        () => onNodeClick?.(d.data, event, element),
+        () => onNodeDoubleClick?.(d.data)
+      );
     });
+    group.on("dblclick", () => deferredClick.doubleClick(() => onNodeDoubleClick?.(d.data)));
   });
 }
 function hideCollidingLabels(d3Lib, container, itemCountRange, zoomScale) {
@@ -3243,14 +3495,15 @@ function buildCoreHierarchy(d3Lib, coreNodes) {
   });
   return hierarchy;
 }
-function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing) {
+function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
     coreRadiusOfDepth(coreRootCircleRadius, depthSpacing),
-    "between-children"
+    "between-children",
+    dotRadius
   );
 }
 function calculateCoreSubtreeRadialExtent(hierarchy, depthSpacing, coreRootCircleRadius = 0) {
@@ -3324,6 +3577,8 @@ function WheelRadialCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -3333,12 +3588,15 @@ function WheelRadialCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   selectedNodeId
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
   const index = useTreeIndex(nodes);
   const groups = (0, import_react10.useMemo)(() => groupNodesByRoot(nodes), [nodes]);
   const rootColorOf = (node) => getGenreTreeColor(index.byId.get(index.rootIdById.get(node.id) ?? node.id)?.wikidataId);
@@ -3347,7 +3605,8 @@ function WheelRadialCore({
   );
   const viewportRef = (0, import_react10.useRef)(null);
   const stageRef = (0, import_react10.useRef)(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react10.useMemo)(() => JSON.stringify(nodes.map(({ id, parentId, side }) => [id, parentId, side])), [nodes]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const centerOnElementRef = (0, import_react10.useRef)(panZoom.centerOnElement);
   (0, import_react10.useEffect)(() => {
@@ -3391,11 +3650,15 @@ function WheelRadialCore({
     () => getItemCountRange(
       groups.map((group) => ({
         itemCount: rootItemCountById.get(group.root.id)
-      }))
+      })),
+      { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
     ),
-    [groups, rootItemCountById]
+    [groups, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
+  );
+  const wheelItemCountRange = (0, import_react10.useMemo)(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, itemCountScaleMax, fullNodeCountForSizing]
   );
-  const wheelItemCountRange = (0, import_react10.useMemo)(() => getItemCountRange(nodes), [nodes]);
   const sectorSpanByRootId = (0, import_react10.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     if (groups.length <= 1) return map;
@@ -3445,10 +3708,10 @@ function WheelRadialCore({
   const chipClearanceFloor = (0, import_react10.useMemo)(
     () => calculateWheelRadiusForAngles(
       layout.map((slot) => slot.angle),
-      MAX_NODE_WIDTH,
+      wheelItemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH,
       WHEEL_RADIUS
     ),
-    [layout]
+    [layout, wheelItemCountRange.maxNodeWidth]
   );
   const maxCoreExtentDelta = (0, import_react10.useMemo)(() => {
     let extent = 0;
@@ -3562,12 +3825,9 @@ function WheelRadialCore({
     wheelItemCountRange,
     panel?.node.id
   ]);
-  const hasInitialFitRef = (0, import_react10.useRef)(false);
   (0, import_react10.useEffect)(() => {
-    if (hasInitialFitRef.current) return;
     const elements = [wheelCircleRef.current, coreSvgRef.current];
     if (!elements.some(Boolean)) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const handleChipClick = (rootId) => {
@@ -3583,7 +3843,8 @@ function WheelRadialCore({
     panZoom.centerOnElement(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, index, panel, showNodeInfo]);
@@ -3818,6 +4079,7 @@ function WheelRadialCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
@@ -3864,7 +4126,7 @@ function useFocusHistory(focusNodeId, isFocusable) {
 
 // src/WheelBreadcrumb.tsx
 var import_react12 = require("react");
-var import_md7 = require("react-icons/md");
+var import_md6 = require("react-icons/md");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var MAX_VISIBLE_ANCESTORS = 3;
 var ANCESTORS_KEPT_WHEN_COLLAPSED = 2;
@@ -3882,7 +4144,7 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
         "aria-label": "All genres",
         title: "All genres",
         onClick: onHome,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md7.MdHome, { className: "gtv-icon", size: 14 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md6.MdHome, { className: "gtv-icon", size: 14 })
       }
     ),
     separator,
@@ -4001,6 +4263,8 @@ function WheelRadialPopCoreCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -4010,8 +4274,10 @@ function WheelRadialPopCoreCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   allowWheelRotation = true,
@@ -4019,6 +4285,7 @@ function WheelRadialPopCoreCore({
   focusNodeId: requestedFocusNodeId = null,
   onFocusChange
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
   const index = useTreeIndex(nodes);
   const focusNodeId = (0, import_react13.useMemo)(
     () => requestedFocusNodeId !== null && isZoomableNode(nodes, requestedFocusNodeId) ? requestedFocusNodeId : null,
@@ -4087,7 +4354,8 @@ function WheelRadialPopCoreCore({
   const viewportRef = (0, import_react13.useRef)(null);
   const stageRef = (0, import_react13.useRef)(null);
   const dotRadiusMemoryRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react13.useMemo)(() => JSON.stringify([focusNodeId, nodes.map(({ id, parentId, side }) => [id, parentId, side])]), [nodes, focusNodeId]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
   const { panel: openPanel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const isInFrame = (id) => id === focusNodeId || centerSubtreeNodeIds.has(id) || ringRootById.has(id);
   const panel = openPanel && isInFrame(openPanel.node.id) ? openPanel : null;
@@ -4158,8 +4426,8 @@ function WheelRadialPopCoreCore({
     () => getItemCountRange([
       ...nodes,
       ...[...rootItemCountById.values()].map((itemCount) => ({ itemCount }))
-    ]),
-    [nodes, rootItemCountById]
+    ], { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
   );
   const isCenterMainstream = isMainstreamPopLineage(index, centerNode.id);
   const centerNodeColor = isCenterMainstream ? "#ffffff" : getGenreNodeStyle(index, centerNode.id).fill;
@@ -4193,8 +4461,8 @@ function WheelRadialPopCoreCore({
       centerSubtreeHierarchy,
       0,
       POP_TREE_DEPTH_RADIAL_SPACING
-    ) : NODE_LAYOUT_SLOT_RADIUS,
-    [centerSubtreeHierarchy]
+    ) : wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS,
+    [centerSubtreeHierarchy, wheelItemCountRange.maxDotRadius]
   );
   const maxCoreExtentDelta = (0, import_react13.useMemo)(() => {
     let extent = 0;
@@ -4216,7 +4484,8 @@ function WheelRadialPopCoreCore({
     (radius) => new Map(
       groups.map((group) => {
         const { pop, core } = branchHierarchiesByRootId.get(group.root.id);
-        const chipWidth = 2 * NODE_LAYOUT_SLOT_RADIUS;
+        const dotRadius = wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS;
+        const chipWidth = 2 * dotRadius;
         return [
           group.root.id,
           {
@@ -4224,14 +4493,16 @@ function WheelRadialPopCoreCore({
               (hierarchy) => measureWedge(
                 d34,
                 hierarchy,
-                popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING)
+                popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
+                dotRadius
               )
             ),
             core: core.map(
               (hierarchy) => measureWedge(
                 d34,
                 hierarchy,
-                coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING)
+                coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
+                dotRadius
               )
             ),
             chip: 2 * Math.asin(Math.min(1, (chipWidth / 2 + CHIP_GAP) / radius))
@@ -4239,7 +4510,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId]
+    [groups, branchHierarchiesByRootId, wheelItemCountRange.maxDotRadius]
   );
   const coreRootCircleRadius = (0, import_react13.useMemo)(
     () => solveRingRadius(
@@ -4249,11 +4520,11 @@ function WheelRadialPopCoreCore({
       ),
       Math.max(
         WHEEL_POP_CORE_RADIUS,
-        mainstreamCircleRadius + NODE_DOT_MAX_RADIUS + POP_SUBTREE_OUTER_MARGIN,
+        mainstreamCircleRadius + (wheelItemCountRange.maxDotRadius ?? NODE_DOT_MAX_RADIUS) + POP_SUBTREE_OUTER_MARGIN,
         popReachRequiredRadius
       )
     ),
-    [measureBranchNeedsAt, mainstreamCircleRadius, popReachRequiredRadius]
+    [measureBranchNeedsAt, mainstreamCircleRadius, popReachRequiredRadius, wheelItemCountRange.maxDotRadius]
   );
   const branchNeedsByRootId = (0, import_react13.useMemo)(
     () => measureBranchNeedsAt(coreRootCircleRadius),
@@ -4357,7 +4628,8 @@ function WheelRadialPopCoreCore({
           angle,
           coreRootCircleRadius,
           span,
-          POP_TREE_DEPTH_RADIAL_SPACING
+          POP_TREE_DEPTH_RADIAL_SPACING,
+          wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS
         );
         const reparentForbiddenIds = reparentingNodeId ? laidOut.descendants().find((d) => d.data.id === reparentingNodeId)?.descendants().map((d) => d.data.id) ?? [] : [];
         const branchGroup = sectorGroup.append("g").attr("class", "gtv-wheel-pop-branch").attr("data-gtv-branch-index", branchIndex);
@@ -4423,7 +4695,8 @@ function WheelRadialPopCoreCore({
           angle,
           span,
           coreRootCircleRadius,
-          POP_TREE_DEPTH_RADIAL_SPACING
+          POP_TREE_DEPTH_RADIAL_SPACING,
+          wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS
         );
         const reparentForbiddenIds = reparentingNodeId ? laidOut.descendants().find((d) => d.data.id === reparentingNodeId)?.descendants().map((d) => d.data.id) ?? [] : [];
         const angleOf = (d) => {
@@ -4587,7 +4860,7 @@ function WheelRadialPopCoreCore({
     originGroup.selectAll("g.gtv-root-label").select("text").style("pointer-events", "all").style("cursor", "pointer").on("click", (_event, d) => {
       const chip = d.id === centerNode.id ? centerChipRef.current : viewportRef.current?.querySelector(`#group-${CSS.escape(d.id)}`);
       chip?.click();
-    }).on("dblclick", (_event, d) => focusOnNodeRef.current(d.id));
+    }).on("dblclick", (_event, d) => chipClickRef.current.doubleClick(() => focusOnNodeRef.current(d.id)));
   }, [
     centerNode,
     centerHasPopDisc,
@@ -4686,18 +4959,12 @@ function WheelRadialPopCoreCore({
     index,
     regionLabel
   ]);
-  const hasInitialFitRef = (0, import_react13.useRef)(false);
   (0, import_react13.useEffect)(() => {
-    hasInitialFitRef.current = false;
-  }, [focusNodeId]);
-  (0, import_react13.useEffect)(() => {
-    if (hasInitialFitRef.current) return;
     const elements = [
       wheelCircleRef.current,
       ...queryTreeContentElements(popSvgRef.current)
     ];
     if (!elements.some(Boolean)) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const handleChipClick = (rootId) => {
@@ -4719,7 +4986,8 @@ function WheelRadialPopCoreCore({
     panZoom.centerOnElement(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, index, openPanel, showNodeInfo, centerSubtreeNodeIds, ringRootById]);
@@ -4746,7 +5014,7 @@ function WheelRadialPopCoreCore({
         )
       };
     });
-  }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
+  }, [groups, continuousAngleByRootId, sectorSpanByRootId, index]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
@@ -4856,9 +5124,9 @@ function WheelRadialPopCoreCore({
                           showNodeInfo(centerNode, chip, viewportRef.current);
                           onNodeClick?.(centerNode, nativeEvent);
                         }
-                      });
+                      }, () => focusOnNode(centerNode.id), centerNode.id);
                     },
-                    onDoubleClick: () => focusOnNode(centerNode.id),
+                    onDoubleClick: () => chipClickRef.current.doubleClick(() => focusOnNode(centerNode.id)),
                     "aria-label": centerNode.name
                   }
                 ) }) }),
@@ -4918,9 +5186,9 @@ function WheelRadialPopCoreCore({
                                   showNodeInfo(root, chip, viewportRef.current);
                                   onNodeClick?.(root, nativeEvent);
                                 }
-                              });
+                              }, () => focusOnNode(group.root.id), group.root.id);
                             },
-                            onDoubleClick: () => focusOnNode(group.root.id)
+                            onDoubleClick: () => chipClickRef.current.doubleClick(() => focusOnNode(group.root.id))
                           }
                         ) })
                       },
@@ -5015,6 +5283,7 @@ function WheelRadialPopCoreCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -5216,7 +5485,7 @@ function GenreTreeOutline(props) {
           return;
         }
         const changed = store.get().selectedId !== node.id;
-        store.set({ selectedId: node.id });
+        if (latestProps.current.selectedNodeId === void 0) store.set({ selectedId: node.id });
         if (changed) latestProps.current.onSelectedNodeChange?.(node);
         onNodeClick?.(node, event.nativeEvent);
       },
@@ -5248,7 +5517,7 @@ function GenreTreeOutline(props) {
     }
     const changed = store.get().selectedId !== nodeId;
     if (changed) pendingScrollIdRef.current = nodeId;
-    store.set({ openIds, selectedId: nodeId });
+    store.set({ openIds, ...notify && latestProps.current.selectedNodeId !== void 0 ? {} : { selectedId: nodeId } });
     if (changed && notify) latestProps.current.onSelectedNodeChange?.(index.byId.get(nodeId));
   };
   const selectNodeRef = (0, import_react14.useRef)(selectNode);
@@ -5289,7 +5558,7 @@ function GenreTreeOutline(props) {
         ancestorNodes: index.ancestorsOf(selectedNode.id).map((n) => ({ node: n, ...model.styleOf(n) })),
         side: "left",
         onClose: () => {
-          store.set({ selectedId: null });
+          if (latestProps.current.selectedNodeId === void 0) store.set({ selectedId: null });
           latestProps.current.onSelectedNodeChange?.(null);
         },
         onSelectNode: (id) => selectNodeRef.current(id),