@behindthemusictree/genre-tree-view 6.2.0 → 6.4.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"
+          }
+        )
       ]
     }
   );
@@ -1047,9 +1093,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);
@@ -1203,6 +1250,9 @@ function resolveInfoPanelSide() {
 }
 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() };
 }
 
@@ -1284,8 +1334,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 +1574,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 +1697,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 +1750,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 +1863,8 @@ function GenreTree({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -1791,6 +1876,7 @@ function GenreTree({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy
 }) {
@@ -1800,6 +1886,10 @@ function GenreTree({
   const stageRef = useRef5(null);
   const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
   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 +1904,8 @@ function GenreTree({
       d3,
       root,
       orientation,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const {
       svgWidth: width,
@@ -1826,7 +1917,8 @@ function GenreTree({
       originalTreeData,
       orientation,
       hideRoot,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const reshapedTreeData = setupTreeLayout(
       d3,
@@ -1835,7 +1927,8 @@ function GenreTree({
       orientation,
       rootDepthOffset,
       width,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     return {
       treeData: reshapedTreeData,
@@ -1843,7 +1936,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 +1987,8 @@ function GenreTree({
       },
       orientation,
       hideRoot,
-      effectiveSelectedNodeId
+      effectiveSelectedNodeId,
+      itemCountRange
     );
   }, [
     treeData,
@@ -1915,7 +2009,8 @@ function GenreTree({
     additionalActions,
     orientation,
     hideRoot,
-    effectiveSelectedNodeId
+    effectiveSelectedNodeId,
+    itemCountRange
   ]);
   useEffect5(() => {
     if (!interactive || !selectedNodeIdProp) return;
@@ -2076,6 +2171,7 @@ function GenreTree({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
@@ -2087,7 +2183,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 +2284,8 @@ function WheelCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -2199,10 +2297,16 @@ function WheelCore({
   defaultViewport,
   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 +2316,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),
@@ -2262,16 +2366,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 +2395,7 @@ function WheelCore({
       );
     }
   };
-  const [appliedSelectedNodeId, setAppliedSelectedNodeId] = useState5(selectedNodeId);
+  const [appliedSelectedNodeId, setAppliedSelectedNodeId] = useState6(selectedNodeId);
   if (selectedNodeId !== appliedSelectedNodeId) {
     setAppliedSelectedNodeId(selectedNodeId);
     const owningGroupIndex = selectedNodeId ? groups.findIndex(
@@ -2361,6 +2467,8 @@ function WheelCore({
                     {
                       nodes: selectedGroup.nodes,
                       itemCountLabel,
+                      itemCountScaleMax,
+                      nodeCountForSizing: fullNodeCountForSizing,
                       orientation: treeOrientation,
                       hideRoot: true,
                       interactive: false,
@@ -2572,6 +2680,7 @@ function WheelCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -2598,24 +2707,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 +2928,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 +2946,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 +2986,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 +3006,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 +3236,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 +3318,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 +3400,8 @@ function WheelRadialCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -3285,14 +3413,16 @@ function WheelRadialCore({
   defaultViewport,
   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);
@@ -3322,7 +3452,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 +3471,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 +3529,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;
@@ -3768,6 +3902,7 @@ function WheelRadialCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
@@ -3785,13 +3920,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 +3948,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 +4086,8 @@ function WheelRadialPopCoreCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -3962,6 +4099,7 @@ function WheelRadialPopCoreCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   allowWheelRotation = true,
@@ -3969,6 +4107,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 +4161,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);
@@ -4091,7 +4230,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 +4247,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 +4282,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 +4305,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 +4314,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 +4331,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId]
+    [groups, branchHierarchiesByRootId, wheelItemCountRange.maxDotRadius]
   );
   const coreRootCircleRadius = useMemo5(
     () => solveRingRadius(
@@ -4199,11 +4341,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 +4362,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 +4449,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 +4516,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 +4681,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,
@@ -4696,7 +4840,7 @@ function WheelRadialPopCoreCore({
         )
       };
     });
-  }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
+  }, [groups, continuousAngleByRootId, sectorSpanByRootId, index]);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -4806,9 +4950,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 +5012,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 +5109,7 @@ function WheelRadialPopCoreCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -4991,7 +5136,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 +5294,7 @@ function GenreTreeOutline(props) {
     }
     return ids;
   }, [reparentingNodeId, index]);
-  const [store] = useState10(
+  const [store] = useState11(
     () => createOutlineStore({
       selectedId: null,
       openIds: /* @__PURE__ */ new Set(),