@behindthemusictree/genre-tree-view 6.2.0 → 6.5.0

package/dist/index.js

@@ -131,6 +131,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;
@@ -145,23 +148,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;
@@ -206,7 +233,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;
@@ -241,19 +268,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
 import { jsx, jsxs } from "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;
 }
@@ -337,13 +367,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(
@@ -405,10 +453,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;
@@ -430,24 +483,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, "_");
@@ -595,7 +654,7 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
 }
 
 // src/FloatingControls.tsx
-import { MdFitScreen, MdZoomIn, MdZoomOut } from "react-icons/md";
+import { ZoomControls } from "@behindthemusictree/ui";
 
 // src/BusyIndicator.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -608,7 +667,7 @@ function BusyIndicator() {
 
 // src/FloatingControls.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
+function FloatingControls({ panZoom, onFit, orientation, zoomControls, leading, busy }) {
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -619,31 +678,18 @@ function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
       children: [
         busy && /* @__PURE__ */ jsx3(BusyIndicator, {}),
         leading && /* @__PURE__ */ jsx3("div", { className: "gtv-floating-controls-leading", children: leading }),
-        /* @__PURE__ */ jsxs3("div", { className: "gtv-zoom-controls", children: [
-          /* @__PURE__ */ jsx3(
-            "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__ */ jsx3(MdZoomIn, { className: "gtv-icon", size: 18 })
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "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__ */ jsx3(MdZoomOut, { className: "gtv-icon", size: 18 })
-            }
-          ),
-          /* @__PURE__ */ jsx3("button", { type: "button", className: "gtv-zoom-btn", onClick: onFit, "aria-label": "Fit to frame", children: /* @__PURE__ */ jsx3(MdFitScreen, { className: "gtv-icon", size: 18 }) })
-        ] })
+        zoomControls !== "never" && /* @__PURE__ */ jsx3(
+          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"
+          }
+        )
       ]
     }
   );
@@ -707,6 +753,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] = useState(0);
@@ -717,6 +775,17 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   const settleTimerRef = useRef(null);
   const stageAnimationRef = useRef(null);
   const defaultViewportRef = useRef(options.defaultViewport);
+  const operationRef = useRef(0);
+  const restoredSelectionRef = useRef(void 0);
+  const restoredRevisionRef = useRef(void 0);
+  const restoredFrameRef = useRef(void 0);
+  const pendingRestoreRef = useRef(null);
+  const measuredFrameRef = useRef(void 0);
+  const fittedFrameRef = useRef(null);
+  const frameElementsRef = useRef([]);
+  const retryFrameRef = useRef(() => {
+  });
+  const pendingCenterRef = useRef(null);
   const centerGuardUntilRef = useRef(0);
   const onViewportChangeRef = useRef(options.onViewportChange);
   useEffect(() => {
@@ -790,6 +859,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [viewportRef]);
   const zoomAtPoint = useCallback(
     (computeNewScale, clientX, clientY) => {
+      operationRef.current += 1;
       const viewport = viewportRef.current;
       if (!viewport) {
         return;
@@ -873,19 +943,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();
@@ -896,6 +973,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       return;
     }
     const handleWheel = (event) => {
+      operationRef.current += 1;
       if (event.target.closest(".gtv-info-panel") !== null) {
         return;
       }
@@ -934,6 +1012,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [viewportRef, wheelZoom]);
   const zoomByButton = useCallback(
     (direction) => {
+      operationRef.current += 1;
       const viewport = viewportRef.current;
       if (!viewport) return;
       const rect = viewport.getBoundingClientRect();
@@ -948,13 +1027,14 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   );
   const fitToFrame = 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));
@@ -963,7 +1043,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 = {
@@ -982,6 +1062,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;
@@ -995,14 +1110,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 = useRef(null);
   const centerAnimationFrameIdRef = useRef(null);
@@ -1036,7 +1152,19 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     stepCenterAnimationRef.current = stepCenterAnimation;
   }, [stepCenterAnimation]);
   const centerOnElement = 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();
@@ -1047,9 +1175,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);
@@ -1068,8 +1197,17 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
         centerAnimationFrameIdRef.current = requestAnimationFrame(() => stepCenterAnimationRef.current());
       }
     },
-    [viewportRef]
+    [viewportRef, options.frameKey, options.selectedNodeId]
   );
+  const centerLatestRef = useRef(centerOnElement);
+  useEffect(() => {
+    centerLatestRef.current = centerOnElement;
+  }, [centerOnElement]);
+  useEffect(() => {
+    retryFrameRef.current = () => {
+      fitToFrame(frameElementsRef.current, { silent: true });
+    };
+  }, [fitToFrame]);
   const lastPointRef = useRef({ x: 0, y: 0 });
   const minScaleRef = useRef(minScale);
   const suppressedPointersRef = useRef(/* @__PURE__ */ new Set());
@@ -1144,6 +1282,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [handlePointerUp]);
   const handlePointerDown = 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;
@@ -1162,6 +1301,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;
+  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]);
   useEffect(() => {
     const pointers = activePointersRef.current;
     const suppressed = suppressedPointersRef.current;
@@ -1196,17 +1371,6 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
 
 // src/use-node-info-panel.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "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
@@ -1215,7 +1379,7 @@ function useNodeInfoPanel({
   const [prevSelectedNodeId, setPrevSelectedNodeId] = useState2(selectedNodeId);
   if (selectedNodeId !== prevSelectedNodeId) {
     setPrevSelectedNodeId(selectedNodeId);
-    if (prevSelectedNodeId != null && selectedNodeId == null) setPanel(null);
+    if (prevSelectedNodeId !== void 0) setPanel(null);
   }
   const shownNodeIdRef = useRef2(null);
   const onSelectedNodeChangeRef = useRef2(onSelectedNodeChange);
@@ -1225,20 +1389,32 @@ function useNodeInfoPanel({
   });
   const showNodeInfo = useCallback2(
     (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 = useCallback2(() => {
+    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
@@ -1284,8 +1460,8 @@ function useTreeIndex(nodes) {
 }
 
 // src/InfoPanel.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { MdArrowBack, MdClose, MdZoomIn as MdZoomIn2 } from "react-icons/md";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { MdArrowBack, MdClose, MdZoomIn } from "react-icons/md";
 
 // src/InfoPanelExpandButton.tsx
 import { MdCloseFullscreen, MdOpenInFull } from "react-icons/md";
@@ -1524,6 +1700,27 @@ function InfoPanel({
   hideExpandButton = false
 }) {
   const panelRef = useRef3(null);
+  const [sheetFull, setSheetFull] = useState5(false);
+  const grabberDragRef = useRef3(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);
+  };
   useEffect3(() => {
     panelRef.current?.toggleAttribute("inert", collapsed);
   }, [collapsed]);
@@ -1626,9 +1823,21 @@ function InfoPanel({
   return /* @__PURE__ */ jsxs6(
     "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__ */ jsx7(
+          "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__ */ jsxs6(
           "div",
           {
@@ -1667,7 +1876,7 @@ function InfoPanel({
                   onClick: onZoomIn,
                   "aria-label": "Zoom in",
                   title: "Zoom in",
-                  children: /* @__PURE__ */ jsx7(MdZoomIn2, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ jsx7(MdZoomIn, { className: "gtv-icon", size: 16 })
                 }
               ),
               onExpandedChange && !hideExpandButton && /* @__PURE__ */ jsx7(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
@@ -1780,6 +1989,8 @@ function GenreTree({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -1789,8 +2000,10 @@ function GenreTree({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy
 }) {
@@ -1798,8 +2011,13 @@ function GenreTree({
   const svgRef = useRef5(null);
   const viewportRef = useRef5(null);
   const stageRef = useRef5(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = useMemo2(() => 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 = useMemo2(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: nodeCountForSizing ?? nodes.length }),
+    [nodes, itemCountScaleMax, nodeCountForSizing]
+  );
   const showNodeInfoRef = useRef5(showNodeInfo);
   useEffect5(() => {
     showNodeInfoRef.current = showNodeInfo;
@@ -1814,7 +2032,8 @@ function GenreTree({
       d3,
       root,
       orientation,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const {
       svgWidth: width,
@@ -1826,7 +2045,8 @@ function GenreTree({
       originalTreeData,
       orientation,
       hideRoot,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const reshapedTreeData = setupTreeLayout(
       d3,
@@ -1835,7 +2055,8 @@ function GenreTree({
       orientation,
       rootDepthOffset,
       width,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     return {
       treeData: reshapedTreeData,
@@ -1843,7 +2064,7 @@ function GenreTree({
       svgWidth: width,
       svgHeight: height
     };
-  }, [nodes, rootColor, orientation, hideRoot, depthSpacingScale]);
+  }, [nodes, rootColor, orientation, hideRoot, depthSpacingScale, itemCountRange]);
   const reparentForbiddenIds = useMemo2(() => {
     if (!reparentingNodeId) return [];
     const reparentingHierarchyNode = treeData.descendants().find((d) => d.data.id === reparentingNodeId);
@@ -1894,7 +2115,8 @@ function GenreTree({
       },
       orientation,
       hideRoot,
-      effectiveSelectedNodeId
+      effectiveSelectedNodeId,
+      itemCountRange
     );
   }, [
     treeData,
@@ -1915,7 +2137,8 @@ function GenreTree({
     additionalActions,
     orientation,
     hideRoot,
-    effectiveSelectedNodeId
+    effectiveSelectedNodeId,
+    itemCountRange
   ]);
   useEffect5(() => {
     if (!interactive || !selectedNodeIdProp) return;
@@ -1928,7 +2151,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]);
@@ -1940,12 +2164,10 @@ function GenreTree({
       }
     };
   }, []);
-  const hasInitialFitRef = useRef5(false);
   useEffect5(() => {
-    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__ */ jsx9(
@@ -2076,6 +2298,7 @@ function GenreTree({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
@@ -2087,7 +2310,7 @@ function GenreTree({
 }
 
 // src/GenreTreeWheelBase.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState6 } from "react";
 import * as d32 from "d3";
 
 // src/root-grouping.ts
@@ -2188,6 +2411,8 @@ function WheelCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -2197,12 +2422,19 @@ function WheelCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   selectedNodeId
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
+  const wheelSizeRange = useMemo3(
+    () => 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";
@@ -2212,18 +2444,18 @@ function WheelCore({
     return getGenreTreeColor(nodes.find((n) => n.id === rootId)?.wikidataId);
   };
   const wheelRadius = useMemo3(
-    () => 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 = useMemo3(
     () => new Map(groups.map((group) => [group.root.id, group.root.itemCount])),
     [groups]
   );
-  const [selectedRootId, setSelectedRootId] = useState5(
+  const [selectedRootId, setSelectedRootId] = useState6(
     groups[0]?.root.id ?? null
   );
-  const [rotationDeg, setRotationDeg] = useState5(
+  const [rotationDeg, setRotationDeg] = useState6(
     () => groups.length > 0 ? computeRotationForSelection(
       0,
       getChipAngle(0, groups.length),
@@ -2232,7 +2464,8 @@ function WheelCore({
   );
   const viewportRef = useRef6(null);
   const stageRef = useRef6(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = useMemo3(() => 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 = useRef6(null);
   const treeAnchorRef = useRef6(null);
@@ -2246,15 +2479,12 @@ function WheelCore({
   useEffect6(() => {
     if (effectiveRootId) onRootSelectRef.current?.(effectiveRootId);
   }, [effectiveRootId]);
-  const hasInitialFitRef = useRef6(false);
   useEffect6(() => {
-    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;
@@ -2262,16 +2492,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 = useMemo3(
     () => buildWheelSectorGradient(
@@ -2289,7 +2521,7 @@ function WheelCore({
       );
     }
   };
-  const [appliedSelectedNodeId, setAppliedSelectedNodeId] = useState5(selectedNodeId);
+  const [appliedSelectedNodeId, setAppliedSelectedNodeId] = useState6(selectedNodeId);
   if (selectedNodeId !== appliedSelectedNodeId) {
     setAppliedSelectedNodeId(selectedNodeId);
     const owningGroupIndex = selectedNodeId ? groups.findIndex(
@@ -2312,7 +2544,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]);
@@ -2361,6 +2594,8 @@ function WheelCore({
                     {
                       nodes: selectedGroup.nodes,
                       itemCountLabel,
+                      itemCountScaleMax,
+                      nodeCountForSizing: fullNodeCountForSizing,
                       orientation: treeOrientation,
                       hideRoot: true,
                       interactive: false,
@@ -2572,6 +2807,7 @@ function WheelCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -2598,24 +2834,38 @@ function GenreTreeWheelRight(props) {
 }
 
 // src/GenreTreeWheelRadialBase.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef7, useState as useState7 } from "react";
 import * as d33 from "d3";
 
 // 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
@@ -2805,13 +3055,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;
@@ -2821,15 +3073,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 = [];
@@ -2861,7 +3113,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);
   });
@@ -2881,8 +3133,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;
@@ -3111,12 +3363,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) {
@@ -3193,14 +3445,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) {
@@ -3274,6 +3527,8 @@ function WheelRadialCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -3283,21 +3538,25 @@ 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 = useMemo4(() => groupNodesByRoot(nodes), [nodes]);
   const rootColorOf = (node) => getGenreTreeColor(index.byId.get(index.rootIdById.get(node.id) ?? node.id)?.wikidataId);
-  const [topRootId, setTopRootId] = useState6(
+  const [topRootId, setTopRootId] = useState7(
     groups[0]?.root.id ?? null
   );
   const viewportRef = useRef7(null);
   const stageRef = useRef7(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = useMemo4(() => 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 = useRef7(panZoom.centerOnElement);
   useEffect7(() => {
@@ -3322,7 +3581,7 @@ function WheelRadialCore({
     () => computeRadialLayout(rootWeights, topIndex, LANDING_ANGLE),
     [rootWeights, topIndex]
   );
-  const [angleMemo, setAngleMemo] = useState6(() => ({
+  const [angleMemo, setAngleMemo] = useState7(() => ({
     layout,
     angles: computeContinuousAngles(groups, layout, /* @__PURE__ */ new Map())
   }));
@@ -3341,11 +3600,15 @@ function WheelRadialCore({
     () => getItemCountRange(
       groups.map((group) => ({
         itemCount: rootItemCountById.get(group.root.id)
-      }))
+      })),
+      { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
     ),
-    [groups, rootItemCountById]
+    [groups, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
+  );
+  const wheelItemCountRange = useMemo4(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, itemCountScaleMax, fullNodeCountForSizing]
   );
-  const wheelItemCountRange = useMemo4(() => getItemCountRange(nodes), [nodes]);
   const sectorSpanByRootId = useMemo4(() => {
     const map = /* @__PURE__ */ new Map();
     if (groups.length <= 1) return map;
@@ -3395,10 +3658,10 @@ function WheelRadialCore({
   const chipClearanceFloor = useMemo4(
     () => calculateWheelRadiusForAngles(
       layout.map((slot) => slot.angle),
-      MAX_NODE_WIDTH,
+      wheelItemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH,
       WHEEL_RADIUS
     ),
-    [layout]
+    [layout, wheelItemCountRange.maxNodeWidth]
   );
   const maxCoreExtentDelta = useMemo4(() => {
     let extent = 0;
@@ -3512,12 +3775,9 @@ function WheelRadialCore({
     wheelItemCountRange,
     panel?.node.id
   ]);
-  const hasInitialFitRef = useRef7(false);
   useEffect7(() => {
-    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) => {
@@ -3533,7 +3793,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]);
@@ -3768,6 +4029,7 @@ function WheelRadialCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
@@ -3785,13 +4047,13 @@ function GenreTreeWheelRadial(props) {
 }
 
 // src/GenreTreeWheelRadialPopCoreBase.tsx
-import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef8, useState as useState10 } from "react";
 import * as d34 from "d3";
 
 // src/use-focus-history.ts
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 function useFocusHistory(focusNodeId, isFocusable) {
-  const [state, setState] = useState7({ seen: focusNodeId, stack: [], pending: void 0 });
+  const [state, setState] = useState8({ seen: focusNodeId, stack: [], pending: void 0 });
   if (state.seen !== focusNodeId) {
     const popTo = state.pending === focusNodeId ? state.stack.lastIndexOf(focusNodeId) : -1;
     setState({
@@ -3813,13 +4075,13 @@ function useFocusHistory(focusNodeId, isFocusable) {
 }
 
 // src/WheelBreadcrumb.tsx
-import { Fragment as Fragment3, useState as useState8 } from "react";
+import { Fragment as Fragment3, useState as useState9 } from "react";
 import { MdHome } from "react-icons/md";
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var MAX_VISIBLE_ANCESTORS = 3;
 var ANCESTORS_KEPT_WHEN_COLLAPSED = 2;
 function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
-  const [expanded, setExpanded] = useState8(false);
+  const [expanded, setExpanded] = useState9(false);
   const collapsed = !expanded && ancestors.length > MAX_VISIBLE_ANCESTORS;
   const visibleAncestors = collapsed ? ancestors.slice(-ANCESTORS_KEPT_WHEN_COLLAPSED) : ancestors;
   const separator = /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u203A" });
@@ -3951,6 +4213,8 @@ function WheelRadialPopCoreCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -3960,8 +4224,10 @@ function WheelRadialPopCoreCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   allowWheelRotation = true,
@@ -3969,6 +4235,7 @@ function WheelRadialPopCoreCore({
   focusNodeId: requestedFocusNodeId = null,
   onFocusChange
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
   const index = useTreeIndex(nodes);
   const focusNodeId = useMemo5(
     () => requestedFocusNodeId !== null && isZoomableNode(nodes, requestedFocusNodeId) ? requestedFocusNodeId : null,
@@ -4022,13 +4289,13 @@ function WheelRadialPopCoreCore({
     (node) => getGenreNodeStyle(index, node.id),
     [index]
   );
-  const [topRootId, setTopRootId] = useState9(
+  const [topRootId, setTopRootId] = useState10(
     groups[0]?.root.id ?? null
   );
-  const [rotationTopRootId, setRotationTopRootId] = useState9(
+  const [rotationTopRootId, setRotationTopRootId] = useState10(
     groups[0]?.root.id ?? null
   );
-  const [renderedFocusNodeId, setRenderedFocusNodeId] = useState9(focusNodeId);
+  const [renderedFocusNodeId, setRenderedFocusNodeId] = useState10(focusNodeId);
   if (renderedFocusNodeId !== focusNodeId) {
     setRenderedFocusNodeId(focusNodeId);
     setTopRootId(groups[0]?.root.id ?? null);
@@ -4037,7 +4304,8 @@ function WheelRadialPopCoreCore({
   const viewportRef = useRef8(null);
   const stageRef = useRef8(null);
   const dotRadiusMemoryRef = useRef8(/* @__PURE__ */ new Map());
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = useMemo5(() => 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;
@@ -4091,7 +4359,7 @@ function WheelRadialPopCoreCore({
   const popSvgRef = useRef8(null);
   const centerChipRef = useRef8(null);
   const regionLabelRef = useRef8(null);
-  const [regionLabel, setRegionLabel] = useState9(null);
+  const [regionLabel, setRegionLabel] = useState10(null);
   const effectiveTopRootId = groups.some((group) => group.root.id === topRootId) ? topRootId : groups[0]?.root.id ?? null;
   const effectiveRotationTopRootId = groups.some(
     (group) => group.root.id === rotationTopRootId
@@ -4108,8 +4376,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;
@@ -4143,8 +4411,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 = useMemo5(() => {
     let extent = 0;
@@ -4166,7 +4434,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,
           {
@@ -4174,14 +4443,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))
@@ -4189,7 +4460,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId]
+    [groups, branchHierarchiesByRootId, wheelItemCountRange.maxDotRadius]
   );
   const coreRootCircleRadius = useMemo5(
     () => solveRingRadius(
@@ -4199,11 +4470,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 = useMemo5(
     () => measureBranchNeedsAt(coreRootCircleRadius),
@@ -4220,7 +4491,7 @@ function WheelRadialPopCoreCore({
     () => computeRadialLayout(rootWeights, topIndex, LANDING_ANGLE2),
     [rootWeights, topIndex]
   );
-  const [angleMemo, setAngleMemo] = useState9(() => ({
+  const [angleMemo, setAngleMemo] = useState10(() => ({
     layout,
     angles: computeContinuousAngles2(groups, layout, /* @__PURE__ */ new Map())
   }));
@@ -4307,7 +4578,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);
@@ -4373,7 +4645,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) => {
@@ -4537,7 +4810,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,
@@ -4636,18 +4909,12 @@ function WheelRadialPopCoreCore({
     index,
     regionLabel
   ]);
-  const hasInitialFitRef = useRef8(false);
   useEffect8(() => {
-    hasInitialFitRef.current = false;
-  }, [focusNodeId]);
-  useEffect8(() => {
-    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) => {
@@ -4669,7 +4936,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]);
@@ -4696,7 +4964,7 @@ function WheelRadialPopCoreCore({
         )
       };
     });
-  }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
+  }, [groups, continuousAngleByRootId, sectorSpanByRootId, index]);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -4806,9 +5074,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
                   }
                 ) }) }),
@@ -4868,9 +5136,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))
                           }
                         ) })
                       },
@@ -4965,6 +5233,7 @@ function WheelRadialPopCoreCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -4991,7 +5260,7 @@ import {
   useEffect as useEffect9,
   useMemo as useMemo6,
   useRef as useRef9,
-  useState as useState10,
+  useState as useState11,
   useSyncExternalStore
 } from "react";
 import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -5149,7 +5418,7 @@ function GenreTreeOutline(props) {
     }
     return ids;
   }, [reparentingNodeId, index]);
-  const [store] = useState10(
+  const [store] = useState11(
     () => createOutlineStore({
       selectedId: null,
       openIds: /* @__PURE__ */ new Set(),
@@ -5174,7 +5443,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);
       },
@@ -5206,7 +5475,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 = useRef9(selectNode);
@@ -5247,7 +5516,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),