@behindthemusictree/genre-tree-view 6.2.0 → 6.4.0

package/dist/index.cjs

@@ -181,6 +181,9 @@ var MIN_NODE_WIDTH = 180;
 var MAX_NODE_WIDTH = 700;
 var MIN_NODE_HEIGHT = 35;
 var MAX_NODE_HEIGHT = 120;
+var NODE_SIZE_REFERENCE_COUNT = 100;
+var HIGH_DENSITY_NODE_MAX_FLOOR_SCALE = 1.5;
+var LOW_DENSITY_DOT_MAX_RADIUS = 70;
 var TOOLBAR_MENU_X_GAP = 4;
 var ACTIONS_OVERLAY_WIDTH = MENU_WIDTH + TOOLBAR_MENU_X_GAP;
 var ACTIONS_OVERLAY_HEIGHT = RECT_BASE_DIMENSIONS.HEIGHT * 7;
@@ -195,23 +198,47 @@ var HORIZONTAL_SEPARATION_BETWEEN_NODES = (NODE_DIMENSIONS.WIDTH + HORIZONTAL_SE
 var VERTICAL_SEPARATION_BETWEEN_NODES = NODE_DIMENSIONS.HEIGHT + VERTICAL_SEPARATION_BETWEEN_RECTANGLES;
 var VERTICAL_ORIENTATION_DEPTH_SEPARATION = VERTICAL_SEPARATION_BETWEEN_NODES * 2 * DEPTH_AXIS_SPACING_FACTOR;
 var SIBLING_SEPARATION_BETWEEN_NODES = MAX_NODE_WIDTH + HORIZONTAL_SEPARATION_BETWEEN_RECTANGLES;
-function getItemCountRange(nodes) {
-  if (nodes.length === 0) return { min: 0, max: 0 };
+function getDensityAdjustedMax(baseMax, min, nodeCount) {
+  const safeNodeCount = Number.isFinite(nodeCount) ? Math.max(1, nodeCount) : 1;
+  const availableRangeScale = Math.min(1, NODE_SIZE_REFERENCE_COUNT / safeNodeCount);
+  const denseTreeFloor = min * HIGH_DENSITY_NODE_MAX_FLOOR_SCALE;
+  return denseTreeFloor + (baseMax - denseTreeFloor) * availableRangeScale;
+}
+function getDensityAdjustedDotMax(nodeCount) {
+  const safeNodeCount = Number.isFinite(nodeCount) ? Math.max(1, nodeCount) : 1;
+  const inverseDensityRadius = NODE_DOT_MAX_RADIUS * NODE_SIZE_REFERENCE_COUNT / safeNodeCount;
+  const denseTreeFloor = NODE_DOT_MIN_RADIUS * HIGH_DENSITY_NODE_MAX_FLOOR_SCALE;
+  return Math.max(denseTreeFloor, Math.min(LOW_DENSITY_DOT_MAX_RADIUS, inverseDensityRadius));
+}
+function getItemCountRange(nodes, options = {}) {
   const counts = nodes.map((node) => node.itemCount);
-  return { min: Math.min(...counts), max: Math.max(...counts) };
+  const validScaleMax = options.itemCountScaleMax !== void 0 && Number.isFinite(options.itemCountScaleMax) && options.itemCountScaleMax >= 0;
+  const nodeCount = options.nodeCountForSizing ?? nodes.length;
+  const observedMin = counts.length === 0 ? 0 : Math.min(...counts);
+  const observedMax = counts.length === 0 ? 0 : Math.max(...counts);
+  const includeDensityCaps = options.nodeCountForSizing !== void 0 || validScaleMax;
+  return {
+    min: validScaleMax ? 0 : observedMin,
+    max: validScaleMax ? options.itemCountScaleMax : observedMax,
+    ...includeDensityCaps && {
+      maxNodeWidth: getDensityAdjustedMax(MAX_NODE_WIDTH, MIN_NODE_WIDTH, nodeCount),
+      maxNodeHeight: getDensityAdjustedMax(MAX_NODE_HEIGHT, MIN_NODE_HEIGHT, nodeCount),
+      maxDotRadius: getDensityAdjustedDotMax(nodeCount)
+    }
+  };
 }
 function logarithmicPosition(itemCount, range) {
   const { min, max } = range;
   const logMin = Math.log1p(Math.max(min, 0));
   const logMax = Math.log1p(Math.max(max, 0));
   const logValue = Math.log1p(Math.max(itemCount, 0));
-  return logMax > logMin ? (logValue - logMin) / (logMax - logMin) : 0;
+  return logMax > logMin ? Math.max(0, Math.min(1, (logValue - logMin) / (logMax - logMin))) : 0;
 }
 function calculateNodeDimensions(itemCount, range) {
   const t = logarithmicPosition(itemCount, range);
   return {
-    WIDTH: Math.round(MIN_NODE_WIDTH + t * (MAX_NODE_WIDTH - MIN_NODE_WIDTH)),
-    HEIGHT: Math.round(MIN_NODE_HEIGHT + t * (MAX_NODE_HEIGHT - MIN_NODE_HEIGHT))
+    WIDTH: Math.round(MIN_NODE_WIDTH + t * ((range.maxNodeWidth ?? MAX_NODE_WIDTH) - MIN_NODE_WIDTH)),
+    HEIGHT: Math.round(MIN_NODE_HEIGHT + t * ((range.maxNodeHeight ?? MAX_NODE_HEIGHT) - MIN_NODE_HEIGHT))
   };
 }
 var NODE_MIN_BORDER_WIDTH = 1;
@@ -256,7 +283,7 @@ var NODE_DOT_LABEL_GAP = 6;
 var NODE_LAYOUT_SLOT_RADIUS = 8;
 function calculateNodeDotRadius(itemCount, range) {
   const minArea = NODE_DOT_MIN_RADIUS ** 2;
-  const maxArea = NODE_DOT_MAX_RADIUS ** 2;
+  const maxArea = (range.maxDotRadius ?? NODE_DOT_MAX_RADIUS) ** 2;
   return Math.sqrt(minArea + logarithmicPosition(itemCount, range) * (maxArea - minArea));
 }
 var WHEEL_RADIUS = 260;
@@ -291,19 +318,22 @@ var PAN_MIN_VISIBLE_PX = 80;
 var PAN_ZOOM_SETTLE_MS = 100;
 var DEFAULT_VIEWPORT_CENTER_GUARD_MS = 1e3;
 var INFO_PANEL_WIDTH = 280;
+var INFO_PANEL_SHEET_MAX_WIDTH = 767;
+var INFO_PANEL_SHEET_PEEK_FRACTION = 0.4;
+var INFO_PANEL_SHEET_DRAG_THRESHOLD_PX = 32;
 
 // src/NodeHelper.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function buildTreeHierarchyStructure(d3Lib, nodes) {
   return d3Lib.stratify().id((d) => d.id).parentId((d) => d.parentId)(nodes);
 }
-function calculateLocalRootDimensions(d3Lib, nodes) {
+function calculateLocalRootDimensions(d3Lib, nodes, options = {}) {
   const root = buildTreeHierarchyStructure(d3Lib, nodes);
-  const range = getItemCountRange(root.descendants().map((d) => d.data));
+  const range = getItemCountRange(root.descendants().map((d) => d.data), options);
   return calculateNodeDimensions(root.data.itemCount, range);
 }
-function calculateRootAnchorClearance(d3Lib, nodes, rootItemCount, rootItemCountRange, axis) {
-  const localExtent = calculateLocalRootDimensions(d3Lib, nodes)[axis];
+function calculateRootAnchorClearance(d3Lib, nodes, rootItemCount, rootItemCountRange, axis, options = {}) {
+  const localExtent = calculateLocalRootDimensions(d3Lib, nodes, options)[axis];
   const displayExtent = calculateNodeDimensions(rootItemCount, rootItemCountRange)[axis];
   return (localExtent + displayExtent) / 2;
 }
@@ -387,13 +417,31 @@ function appendPaths(d3Lib, svg, treeData, itemCountRange, orientation = "horizo
 }
 
 // src/tree-renderer.ts
-function calculateSvgDimensions(d3Lib, treeData, orientation = "horizontal", hideRoot = false, depthSpacingScale = 1) {
-  const nodes = treeData.descendants();
-  const itemCountRange = getItemCountRange(nodes.map((d) => d.data));
-  const maxNodeDimensions = { WIDTH: MAX_NODE_WIDTH, HEIGHT: MAX_NODE_HEIGHT };
+function getLayoutSpacings(itemCountRange, depthSpacingScale = 1) {
+  const maxWidth = itemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH;
+  const maxHeight = itemCountRange.maxNodeHeight ?? MAX_NODE_HEIGHT;
+  const verticalSeparation = maxHeight + VERTICAL_SEPARATION_BETWEEN_RECTANGLES;
+  return {
+    horizontalDepth: (maxWidth + ACTIONS_OVERLAY_WIDTH + HORIZONTAL_SEPARATION_BETWEEN_RECTANGLES) * DEPTH_AXIS_SPACING_FACTOR * depthSpacingScale,
+    verticalBreadth: verticalSeparation,
+    verticalDepth: verticalSeparation * 2 * DEPTH_AXIS_SPACING_FACTOR * depthSpacingScale,
+    verticalSibling: maxWidth + HORIZONTAL_SEPARATION_BETWEEN_RECTANGLES
+  };
+}
+function calculateSvgDimensions(d3Lib, treeData, orientation = "horizontal", hideRoot = false, depthSpacingScale = 1, suppliedItemCountRange) {
+  const treeNodes = treeData.descendants();
+  const nodes = treeNodes;
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    treeNodes.map((d) => d.data)
+  );
+  const maxNodeDimensions = {
+    WIDTH: itemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH,
+    HEIGHT: itemCountRange.maxNodeHeight ?? MAX_NODE_HEIGHT
+  };
   const maximumLevel = d3Lib.max(nodes, (d) => d.depth);
-  const depthSeparation = VERTICAL_ORIENTATION_DEPTH_SEPARATION * depthSpacingScale;
-  const depthSeparationHorizontal = HORIZONTAL_SEPARATION_BETWEEN_NODES * depthSpacingScale;
+  const layoutSpacings = getLayoutSpacings(itemCountRange, depthSpacingScale);
+  const depthSeparation = layoutSpacings.verticalDepth;
+  const depthSeparationHorizontal = layoutSpacings.horizontalDepth;
   if (isVerticalOrientation(orientation)) {
     const svgHeight2 = hideRoot ? maximumLevel * depthSeparation : maximumLevel * depthSeparation + maxNodeDimensions.HEIGHT + ACTIONS_OVERLAY_HEIGHT / 2;
     const rootWidth = calculateNodeDimensions(
@@ -455,10 +503,15 @@ function calculateSvgDimensions(d3Lib, treeData, orientation = "horizontal", hid
   const svgWidth = maximumLevel * depthSeparationHorizontal + maxNodeDimensions.WIDTH + ACTIONS_OVERLAY_WIDTH;
   return { svgWidth, svgHeight, highestVerticalCoordinate, rootDepthOffset: 0 };
 }
-function setupTreeLayout(d3Lib, treeData, highestVerticalCoordinate, orientation = "horizontal", rootDepthOffset = 0, svgWidth = 0, depthSpacingScale = 1) {
+function setupTreeLayout(d3Lib, treeData, highestVerticalCoordinate, orientation = "horizontal", rootDepthOffset = 0, svgWidth = 0, depthSpacingScale = 1, suppliedItemCountRange) {
+  const treeNodes = treeData.descendants();
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    treeNodes.map((d) => d.data)
+  );
+  const layoutSpacings = getLayoutSpacings(itemCountRange, depthSpacingScale);
   if (isVerticalOrientation(orientation)) {
     const maximumLevel = d3Lib.max(treeData.descendants(), (d) => d.depth);
-    const depthSeparation = VERTICAL_ORIENTATION_DEPTH_SEPARATION * depthSpacingScale;
+    const depthSeparation = layoutSpacings.verticalDepth;
     treeData.each(function(d) {
       d.x = d.x + highestVerticalCoordinate;
       d.y = depthAxisSign(orientation) === -1 ? (maximumLevel - d.depth) * depthSeparation : d.depth * depthSeparation + rootDepthOffset;
@@ -480,24 +533,30 @@ function setupTreeLayout(d3Lib, treeData, highestVerticalCoordinate, orientation
   });
   return treeData;
 }
-function createTreeLayout(d3Lib, root, orientation = "horizontal", depthSpacingScale = 1) {
+function createTreeLayout(d3Lib, root, orientation = "horizontal", depthSpacingScale = 1, suppliedItemCountRange) {
+  const nodes = root.descendants();
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    nodes.map((d) => d.data)
+  );
+  const layoutSpacings = getLayoutSpacings(itemCountRange, depthSpacingScale);
   const nodeSize = isVerticalOrientation(orientation) ? [
-    SIBLING_SEPARATION_BETWEEN_NODES,
-    VERTICAL_ORIENTATION_DEPTH_SEPARATION * depthSpacingScale
+    layoutSpacings.verticalSibling,
+    layoutSpacings.verticalDepth
   ] : [
-    VERTICAL_SEPARATION_BETWEEN_NODES,
-    HORIZONTAL_SEPARATION_BETWEEN_NODES * depthSpacingScale
+    layoutSpacings.verticalBreadth,
+    layoutSpacings.horizontalDepth
   ];
   const treeLayout = d3Lib.tree().nodeSize(nodeSize).separation(() => 1);
   return treeLayout(root);
 }
-function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNodeId, reparentForbiddenIds, rootColor, callbacks, orientation = "horizontal", hideRoot = false, selectedNodeId = null) {
+function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNodeId, reparentForbiddenIds, rootColor, callbacks, orientation = "horizontal", hideRoot = false, selectedNodeId = null, suppliedItemCountRange) {
   const { onReparentTargetSelect, onNodeClick } = callbacks;
   if (!svgRef.current) {
     throw new Error("SVG reference is null");
   }
-  const itemCountRange = getItemCountRange(
-    treeData.descendants().map((d) => d.data)
+  const treeNodes = treeData.descendants();
+  const itemCountRange = suppliedItemCountRange ?? getItemCountRange(
+    treeNodes.map((d) => d.data)
   );
   const svg = d3Lib.select(svgRef.current).append("svg").attr("width", svgWidth).attr("height", svgHeight).style("overflow", "visible").append("g");
   const safeRootId = treeData.data.id.replace(/[^a-zA-Z0-9_-]/g, "_");
@@ -645,7 +704,7 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
 }
 
 // src/FloatingControls.tsx
-var import_md = require("react-icons/md");
+var import_ui = require("@behindthemusictree/ui");
 
 // src/BusyIndicator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -658,7 +717,7 @@ function BusyIndicator() {
 
 // src/FloatingControls.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
+function FloatingControls({ panZoom, onFit, orientation, zoomControls, leading, busy }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -669,31 +728,18 @@ function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
       children: [
         busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BusyIndicator, {}),
         leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gtv-floating-controls-leading", children: leading }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gtv-zoom-controls", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "button",
-              className: ["gtv-zoom-btn", !panZoom.canZoomIn && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
-              disabled: !panZoom.canZoomIn,
-              onClick: panZoom.zoomIn,
-              "aria-label": "Zoom in",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdZoomIn, { className: "gtv-icon", size: 18 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "button",
-              className: ["gtv-zoom-btn", !panZoom.canZoomOut && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
-              disabled: !panZoom.canZoomOut,
-              onClick: panZoom.zoomOut,
-              "aria-label": "Zoom out",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdZoomOut, { className: "gtv-icon", size: 18 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "gtv-zoom-btn", onClick: onFit, "aria-label": "Fit to frame", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdFitScreen, { className: "gtv-icon", size: 18 }) })
-        ] })
+        zoomControls !== "never" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_ui.ZoomControls,
+          {
+            onZoomIn: panZoom.zoomIn,
+            onZoomOut: panZoom.zoomOut,
+            onFit,
+            canZoomIn: panZoom.canZoomIn,
+            canZoomOut: panZoom.canZoomOut,
+            orientation,
+            className: zoomControls === "auto" ? "gtv-zoom-controls gtv-zoom-controls--auto" : "gtv-zoom-controls"
+          }
+        )
       ]
     }
   );
@@ -1097,9 +1143,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);
@@ -1253,6 +1300,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() };
 }
 
@@ -1335,10 +1385,10 @@ function useTreeIndex(nodes) {
 
 // src/InfoPanel.tsx
 var import_react6 = require("react");
-var import_md5 = require("react-icons/md");
+var import_md4 = require("react-icons/md");
 
 // src/InfoPanelExpandButton.tsx
-var import_md2 = require("react-icons/md");
+var import_md = require("react-icons/md");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1349,14 +1399,14 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
       style,
       onClick: () => onExpandedChange(!expanded),
       "aria-label": expanded ? "Collapse panel" : "Expand panel",
-      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md2.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md2.MdOpenInFull, { className: "gtv-icon", size: 16 })
+      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdOpenInFull, { className: "gtv-icon", size: 16 })
     }
   );
 }
 
 // src/InfoPanelSection.tsx
 var import_react4 = require("react");
-var import_md3 = require("react-icons/md");
+var import_md2 = require("react-icons/md");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function InfoPanelSection({ title, children }) {
   const [open, setOpen] = (0, import_react4.useState)(true);
@@ -1370,7 +1420,7 @@ function InfoPanelSection({ title, children }) {
         onClick: () => setOpen((isOpen) => !isOpen),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-children-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md3.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md2.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
         ]
       }
     ),
@@ -1380,7 +1430,7 @@ function InfoPanelSection({ title, children }) {
 
 // src/NodeToolbar.tsx
 var import_react5 = require("react");
-var import_md4 = require("react-icons/md");
+var import_md3 = require("react-icons/md");
 var import_fa = require("react-icons/fa");
 var import_pi2 = require("react-icons/pi");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1458,7 +1508,7 @@ function NodeToolbar({
             "aria-haspopup": "menu",
             "aria-expanded": menuOpen,
             onClick: () => setMenuOpen((open) => !open),
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md4.MdMoreVert, { size: "0.6em" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md3.MdMoreVert, { size: "0.6em" })
           }
         ),
         menuOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
@@ -1472,7 +1522,7 @@ function NodeToolbar({
                 onRenameRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md4.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md3.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Rename" })
               ]
             }
@@ -1574,6 +1624,27 @@ function InfoPanel({
   hideExpandButton = false
 }) {
   const panelRef = (0, import_react6.useRef)(null);
+  const [sheetFull, setSheetFull] = (0, import_react6.useState)(false);
+  const grabberDragRef = (0, import_react6.useRef)(null);
+  const onGrabberPointerDown = (event) => {
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    grabberDragRef.current = { startY: event.clientY, dragged: false };
+  };
+  const onGrabberPointerUp = (event) => {
+    const drag = grabberDragRef.current;
+    if (!drag) return;
+    const dy = event.clientY - drag.startY;
+    if (Math.abs(dy) < INFO_PANEL_SHEET_DRAG_THRESHOLD_PX) return;
+    drag.dragged = true;
+    if (dy < 0) setSheetFull(true);
+    else if (sheetFull) setSheetFull(false);
+    else if (!hideClose) onClose();
+  };
+  const onGrabberClick = () => {
+    const dragged = grabberDragRef.current?.dragged ?? false;
+    grabberDragRef.current = null;
+    if (!dragged) setSheetFull((full) => !full);
+  };
   (0, import_react6.useEffect)(() => {
     panelRef.current?.toggleAttribute("inert", collapsed);
   }, [collapsed]);
@@ -1676,9 +1747,21 @@ function InfoPanel({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: `gtv-info-panel gtv-info-panel--${side}${expanded ? " gtv-info-panel--expanded" : ""}${expanded && !hasAside ? " gtv-info-panel--expanded-solo" : ""}${collapsed ? " gtv-info-panel--collapsed" : ""}`,
+      className: `gtv-info-panel gtv-info-panel--sheet${sheetFull ? " gtv-info-panel--sheet-full" : ""} gtv-info-panel--${side}${expanded ? " gtv-info-panel--expanded" : ""}${expanded && !hasAside ? " gtv-info-panel--expanded-solo" : ""}${collapsed ? " gtv-info-panel--collapsed" : ""}`,
       ref: panelRef,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "gtv-info-panel-grabber",
+            "aria-label": sheetFull ? "Lower panel" : "Raise panel",
+            "aria-expanded": sheetFull,
+            onPointerDown: onGrabberPointerDown,
+            onPointerUp: onGrabberPointerUp,
+            onClick: onGrabberClick
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
@@ -1694,7 +1777,7 @@ function InfoPanel({
                   onClick: onPrevious,
                   "aria-label": previousLabel ? `Previous: ${previousLabel}` : "Previous",
                   title: previousLabel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdArrowBack, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdArrowBack, { className: "gtv-icon", size: 16 })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1717,7 +1800,7 @@ function InfoPanel({
                   onClick: onZoomIn,
                   "aria-label": "Zoom in",
                   title: "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdZoomIn, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdZoomIn, { className: "gtv-icon", size: 16 })
                 }
               ),
               onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
@@ -1729,7 +1812,7 @@ function InfoPanel({
                   style: { color: textColor },
                   onClick: onClose,
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdClose, { className: "gtv-icon", size: 16 })
                 }
               )
             ]
@@ -1753,7 +1836,7 @@ function InfoPanel({
 
 // src/OverlayPanel.tsx
 var import_react7 = require("react");
-var import_md6 = require("react-icons/md");
+var import_md5 = require("react-icons/md");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function OverlayPanel({
   title,
@@ -1793,7 +1876,7 @@ function OverlayPanel({
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-info-panel-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
       onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange }),
-      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md6.MdClose, { className: "gtv-icon", size: 16 }) })
+      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-info-panel-body", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
@@ -1830,6 +1913,8 @@ function GenreTree({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -1841,6 +1926,7 @@ function GenreTree({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy
 }) {
@@ -1850,6 +1936,10 @@ function GenreTree({
   const stageRef = (0, import_react8.useRef)(null);
   const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId: selectedNodeIdProp, onSelectedNodeChange });
+  const itemCountRange = (0, import_react8.useMemo)(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: nodeCountForSizing ?? nodes.length }),
+    [nodes, itemCountScaleMax, nodeCountForSizing]
+  );
   const showNodeInfoRef = (0, import_react8.useRef)(showNodeInfo);
   (0, import_react8.useEffect)(() => {
     showNodeInfoRef.current = showNodeInfo;
@@ -1864,7 +1954,8 @@ function GenreTree({
       d3,
       root,
       orientation,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const {
       svgWidth: width,
@@ -1876,7 +1967,8 @@ function GenreTree({
       originalTreeData,
       orientation,
       hideRoot,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const reshapedTreeData = setupTreeLayout(
       d3,
@@ -1885,7 +1977,8 @@ function GenreTree({
       orientation,
       rootDepthOffset,
       width,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     return {
       treeData: reshapedTreeData,
@@ -1893,7 +1986,7 @@ function GenreTree({
       svgWidth: width,
       svgHeight: height
     };
-  }, [nodes, rootColor, orientation, hideRoot, depthSpacingScale]);
+  }, [nodes, rootColor, orientation, hideRoot, depthSpacingScale, itemCountRange]);
   const reparentForbiddenIds = (0, import_react8.useMemo)(() => {
     if (!reparentingNodeId) return [];
     const reparentingHierarchyNode = treeData.descendants().find((d) => d.data.id === reparentingNodeId);
@@ -1944,7 +2037,8 @@ function GenreTree({
       },
       orientation,
       hideRoot,
-      effectiveSelectedNodeId
+      effectiveSelectedNodeId,
+      itemCountRange
     );
   }, [
     treeData,
@@ -1965,7 +2059,8 @@ function GenreTree({
     additionalActions,
     orientation,
     hideRoot,
-    effectiveSelectedNodeId
+    effectiveSelectedNodeId,
+    itemCountRange
   ]);
   (0, import_react8.useEffect)(() => {
     if (!interactive || !selectedNodeIdProp) return;
@@ -2126,6 +2221,7 @@ function GenreTree({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
@@ -2238,6 +2334,8 @@ function WheelCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -2249,10 +2347,16 @@ function WheelCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   selectedNodeId
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
+  const wheelSizeRange = (0, import_react9.useMemo)(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, itemCountScaleMax, fullNodeCountForSizing]
+  );
   const treeOrientation = direction === "left" ? "horizontal-anchored" : "vertical";
   const landingAngle = direction === "left" ? 90 : 0;
   const chipHalfExtentVar = direction === "left" ? "--gtv-wheel-chip-half-width" : "--gtv-wheel-chip-half-height";
@@ -2262,10 +2366,10 @@ function WheelCore({
     return getGenreTreeColor(nodes.find((n) => n.id === rootId)?.wikidataId);
   };
   const wheelRadius = (0, import_react9.useMemo)(
-    () => calculateWheelRadius(groups.length, MAX_NODE_WIDTH, WHEEL_RADIUS),
-    [groups.length]
+    () => calculateWheelRadius(groups.length, wheelSizeRange.maxNodeWidth ?? MAX_NODE_WIDTH, WHEEL_RADIUS),
+    [groups.length, wheelSizeRange.maxNodeWidth]
   );
-  const wheelViewportHeight = wheelRadius * 2 + MAX_NODE_HEIGHT / 2;
+  const wheelViewportHeight = wheelRadius * 2 + (wheelSizeRange.maxNodeHeight ?? MAX_NODE_HEIGHT) / 2;
   const rootItemCountById = (0, import_react9.useMemo)(
     () => new Map(groups.map((group) => [group.root.id, group.root.itemCount])),
     [groups]
@@ -2312,16 +2416,18 @@ function WheelCore({
     () => getItemCountRange(
       groups.map((group) => ({
         itemCount: rootItemCountById.get(group.root.id)
-      }))
+      })),
+      { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
     ),
-    [groups, rootItemCountById]
+    [groups, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
   );
   const rootChipHalfExtent = selectedGroup ? calculateRootAnchorClearance(
     d32,
     selectedGroup.nodes,
     rootItemCountById.get(selectedGroup.root.id),
     rootItemCountRange,
-    direction === "left" ? "WIDTH" : "HEIGHT"
+    direction === "left" ? "WIDTH" : "HEIGHT",
+    { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
   ) : 0;
   const sectorFillGradient = (0, import_react9.useMemo)(
     () => buildWheelSectorGradient(
@@ -2411,6 +2517,8 @@ function WheelCore({
                     {
                       nodes: selectedGroup.nodes,
                       itemCountLabel,
+                      itemCountScaleMax,
+                      nodeCountForSizing: fullNodeCountForSizing,
                       orientation: treeOrientation,
                       hideRoot: true,
                       interactive: false,
@@ -2622,6 +2730,7 @@ function WheelCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([
@@ -2654,18 +2763,32 @@ var d33 = __toESM(require("d3"), 1);
 // src/defer-click.ts
 function createDeferredClick() {
   let timeoutId = null;
+  let pendingKey = void 0;
+  let doubledAt = -Infinity;
   const cancel = () => {
     if (timeoutId !== null) clearTimeout(timeoutId);
     timeoutId = null;
   };
-  const schedule = (action) => {
+  const schedule = (action, onDouble, key) => {
+    if (onDouble && timeoutId !== null && key === pendingKey) {
+      cancel();
+      doubledAt = Date.now();
+      onDouble();
+      return;
+    }
     cancel();
+    pendingKey = key;
     timeoutId = setTimeout(() => {
       timeoutId = null;
       action();
     }, DOUBLE_CLICK_DELAY_MS);
   };
-  return { schedule, cancel };
+  const doubleClick = (onDouble) => {
+    cancel();
+    if (Date.now() - doubledAt < DOUBLE_CLICK_DELAY_MS) return;
+    onDouble();
+  };
+  return { schedule, cancel, doubleClick };
 }
 
 // src/radial-wheel-geometry.ts
@@ -2855,13 +2978,15 @@ function calculatePopSubtreeRadialExtent(hierarchy, coreRootCircleRadius = 0) {
     POP_TREE_DEPTH_RADIAL_SPACING
   ) + MAX_NODE_WIDTH / 2 + POP_SUBTREE_OUTER_MARGIN;
 }
-function computePopRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, coreRootCircleRadius, wedgeSpanDegrees = POP_WEDGE_SPAN_DEGREES, depthSpacing = POP_TREE_DEPTH_RADIAL_SPACING) {
+function computePopRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, coreRootCircleRadius, wedgeSpanDegrees = POP_WEDGE_SPAN_DEGREES, depthSpacing = POP_TREE_DEPTH_RADIAL_SPACING, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
-    popRadiusOfDepth(coreRootCircleRadius, depthSpacing)
+    popRadiusOfDepth(coreRootCircleRadius, depthSpacing),
+    "center",
+    dotRadius
   );
 }
 var MIN_DOT_GAP = 5.6;
@@ -2871,15 +2996,15 @@ function popRadiusOfDepth(coreRootCircleRadius, depthSpacing) {
 function coreRadiusOfDepth(coreRootCircleRadius, depthSpacing) {
   return (depth) => getRadialDepthRadius(depth + 1, coreRootCircleRadius, depthSpacing);
 }
-function measureWedge(_d3Lib, hierarchy, radiusOfDepth) {
-  const dotRadius = () => NODE_LAYOUT_SLOT_RADIUS;
+function measureWedge(_d3Lib, hierarchy, radiusOfDepth, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
+  const slotRadius = () => dotRadius;
   const offsetFromParent = /* @__PURE__ */ new Map();
   const shiftLevel = (level, by) => ({
     left: { ...level.left, x: level.left.x + by },
     right: { ...level.right, x: level.right.x + by }
   });
   const pack = (node) => {
-    const own = { x: 0, dotRadius: dotRadius() };
+    const own = { x: 0, dotRadius: slotRadius() };
     if (!node.children) return [{ left: own, right: own }];
     const below = [];
     const childOffsets = [];
@@ -2911,7 +3036,7 @@ function measureWedge(_d3Lib, hierarchy, radiusOfDepth) {
   let min = Infinity;
   let max = -Infinity;
   hierarchy.each((d) => {
-    const inset = (dotRadius() + MIN_DOT_GAP / 2) / radiusOfDepth(d.depth);
+    const inset = (slotRadius() + MIN_DOT_GAP / 2) / radiusOfDepth(d.depth);
     min = Math.min(min, d.x - inset);
     max = Math.max(max, d.x + inset);
   });
@@ -2931,8 +3056,8 @@ function splitAtBranching(hierarchy) {
   const children = branching.children;
   return children && children.length > 1 ? { chain, branching, children } : null;
 }
-function layoutWedge(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, radiusOfDepth, slack = "center") {
-  const neededRad = measureWedge(d3Lib, hierarchy, radiusOfDepth);
+function layoutWedge(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, radiusOfDepth, slack = "center", dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
+  const neededRad = measureWedge(d3Lib, hierarchy, radiusOfDepth, dotRadius);
   const wedgeSpanRad = wedgeSpanDegrees * Math.PI / 180;
   const scale = Math.min(MAX_WEDGE_STRETCH, wedgeSpanRad / neededRad);
   const wedgeCenterRad = wedgeCenterAngleDegrees * Math.PI / 180;
@@ -3161,12 +3286,12 @@ function renderPopSubtree(d3Lib, svg, hierarchy, rootColor, reparentingNodeId, r
     group.on("click", (event) => {
       if (reparentingNodeId) return;
       const element = event.currentTarget;
-      deferredClick.schedule(() => onNodeClick?.(d.data, event, element));
-    });
-    group.on("dblclick", () => {
-      deferredClick.cancel();
-      onNodeDoubleClick?.(d.data);
+      deferredClick.schedule(
+        () => onNodeClick?.(d.data, event, element),
+        () => onNodeDoubleClick?.(d.data)
+      );
     });
+    group.on("dblclick", () => deferredClick.doubleClick(() => onNodeDoubleClick?.(d.data)));
   });
 }
 function hideCollidingLabels(d3Lib, container, itemCountRange, zoomScale) {
@@ -3243,14 +3368,15 @@ function buildCoreHierarchy(d3Lib, coreNodes) {
   });
   return hierarchy;
 }
-function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing) {
+function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
     coreRadiusOfDepth(coreRootCircleRadius, depthSpacing),
-    "between-children"
+    "between-children",
+    dotRadius
   );
 }
 function calculateCoreSubtreeRadialExtent(hierarchy, depthSpacing, coreRootCircleRadius = 0) {
@@ -3324,6 +3450,8 @@ function WheelRadialCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -3335,10 +3463,12 @@ function WheelRadialCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   selectedNodeId
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
   const index = useTreeIndex(nodes);
   const groups = (0, import_react10.useMemo)(() => groupNodesByRoot(nodes), [nodes]);
   const rootColorOf = (node) => getGenreTreeColor(index.byId.get(index.rootIdById.get(node.id) ?? node.id)?.wikidataId);
@@ -3391,11 +3521,15 @@ function WheelRadialCore({
     () => getItemCountRange(
       groups.map((group) => ({
         itemCount: rootItemCountById.get(group.root.id)
-      }))
+      })),
+      { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }
     ),
-    [groups, rootItemCountById]
+    [groups, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
+  );
+  const wheelItemCountRange = (0, import_react10.useMemo)(
+    () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, itemCountScaleMax, fullNodeCountForSizing]
   );
-  const wheelItemCountRange = (0, import_react10.useMemo)(() => getItemCountRange(nodes), [nodes]);
   const sectorSpanByRootId = (0, import_react10.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     if (groups.length <= 1) return map;
@@ -3445,10 +3579,10 @@ function WheelRadialCore({
   const chipClearanceFloor = (0, import_react10.useMemo)(
     () => calculateWheelRadiusForAngles(
       layout.map((slot) => slot.angle),
-      MAX_NODE_WIDTH,
+      wheelItemCountRange.maxNodeWidth ?? MAX_NODE_WIDTH,
       WHEEL_RADIUS
     ),
-    [layout]
+    [layout, wheelItemCountRange.maxNodeWidth]
   );
   const maxCoreExtentDelta = (0, import_react10.useMemo)(() => {
     let extent = 0;
@@ -3818,6 +3952,7 @@ function WheelRadialCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
@@ -3864,7 +3999,7 @@ function useFocusHistory(focusNodeId, isFocusable) {
 
 // src/WheelBreadcrumb.tsx
 var import_react12 = require("react");
-var import_md7 = require("react-icons/md");
+var import_md6 = require("react-icons/md");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var MAX_VISIBLE_ANCESTORS = 3;
 var ANCESTORS_KEPT_WHEN_COLLAPSED = 2;
@@ -3882,7 +4017,7 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
         "aria-label": "All genres",
         title: "All genres",
         onClick: onHome,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md7.MdHome, { className: "gtv-icon", size: 14 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md6.MdHome, { className: "gtv-icon", size: 14 })
       }
     ),
     separator,
@@ -4001,6 +4136,8 @@ function WheelRadialPopCoreCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
   renderDangerZone,
   expanded,
@@ -4012,6 +4149,7 @@ function WheelRadialPopCoreCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
   floatingControlsLeading,
   busy,
   allowWheelRotation = true,
@@ -4019,6 +4157,7 @@ function WheelRadialPopCoreCore({
   focusNodeId: requestedFocusNodeId = null,
   onFocusChange
 }) {
+  const fullNodeCountForSizing = nodeCountForSizing ?? nodes.length;
   const index = useTreeIndex(nodes);
   const focusNodeId = (0, import_react13.useMemo)(
     () => requestedFocusNodeId !== null && isZoomableNode(nodes, requestedFocusNodeId) ? requestedFocusNodeId : null,
@@ -4158,8 +4297,8 @@ function WheelRadialPopCoreCore({
     () => getItemCountRange([
       ...nodes,
       ...[...rootItemCountById.values()].map((itemCount) => ({ itemCount }))
-    ]),
-    [nodes, rootItemCountById]
+    ], { itemCountScaleMax, nodeCountForSizing: fullNodeCountForSizing }),
+    [nodes, rootItemCountById, itemCountScaleMax, fullNodeCountForSizing]
   );
   const isCenterMainstream = isMainstreamPopLineage(index, centerNode.id);
   const centerNodeColor = isCenterMainstream ? "#ffffff" : getGenreNodeStyle(index, centerNode.id).fill;
@@ -4193,8 +4332,8 @@ function WheelRadialPopCoreCore({
       centerSubtreeHierarchy,
       0,
       POP_TREE_DEPTH_RADIAL_SPACING
-    ) : NODE_LAYOUT_SLOT_RADIUS,
-    [centerSubtreeHierarchy]
+    ) : wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS,
+    [centerSubtreeHierarchy, wheelItemCountRange.maxDotRadius]
   );
   const maxCoreExtentDelta = (0, import_react13.useMemo)(() => {
     let extent = 0;
@@ -4216,7 +4355,8 @@ function WheelRadialPopCoreCore({
     (radius) => new Map(
       groups.map((group) => {
         const { pop, core } = branchHierarchiesByRootId.get(group.root.id);
-        const chipWidth = 2 * NODE_LAYOUT_SLOT_RADIUS;
+        const dotRadius = wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS;
+        const chipWidth = 2 * dotRadius;
         return [
           group.root.id,
           {
@@ -4224,14 +4364,16 @@ function WheelRadialPopCoreCore({
               (hierarchy) => measureWedge(
                 d34,
                 hierarchy,
-                popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING)
+                popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
+                dotRadius
               )
             ),
             core: core.map(
               (hierarchy) => measureWedge(
                 d34,
                 hierarchy,
-                coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING)
+                coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
+                dotRadius
               )
             ),
             chip: 2 * Math.asin(Math.min(1, (chipWidth / 2 + CHIP_GAP) / radius))
@@ -4239,7 +4381,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId]
+    [groups, branchHierarchiesByRootId, wheelItemCountRange.maxDotRadius]
   );
   const coreRootCircleRadius = (0, import_react13.useMemo)(
     () => solveRingRadius(
@@ -4249,11 +4391,11 @@ function WheelRadialPopCoreCore({
       ),
       Math.max(
         WHEEL_POP_CORE_RADIUS,
-        mainstreamCircleRadius + NODE_DOT_MAX_RADIUS + POP_SUBTREE_OUTER_MARGIN,
+        mainstreamCircleRadius + (wheelItemCountRange.maxDotRadius ?? NODE_DOT_MAX_RADIUS) + POP_SUBTREE_OUTER_MARGIN,
         popReachRequiredRadius
       )
     ),
-    [measureBranchNeedsAt, mainstreamCircleRadius, popReachRequiredRadius]
+    [measureBranchNeedsAt, mainstreamCircleRadius, popReachRequiredRadius, wheelItemCountRange.maxDotRadius]
   );
   const branchNeedsByRootId = (0, import_react13.useMemo)(
     () => measureBranchNeedsAt(coreRootCircleRadius),
@@ -4357,7 +4499,8 @@ function WheelRadialPopCoreCore({
           angle,
           coreRootCircleRadius,
           span,
-          POP_TREE_DEPTH_RADIAL_SPACING
+          POP_TREE_DEPTH_RADIAL_SPACING,
+          wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS
         );
         const reparentForbiddenIds = reparentingNodeId ? laidOut.descendants().find((d) => d.data.id === reparentingNodeId)?.descendants().map((d) => d.data.id) ?? [] : [];
         const branchGroup = sectorGroup.append("g").attr("class", "gtv-wheel-pop-branch").attr("data-gtv-branch-index", branchIndex);
@@ -4423,7 +4566,8 @@ function WheelRadialPopCoreCore({
           angle,
           span,
           coreRootCircleRadius,
-          POP_TREE_DEPTH_RADIAL_SPACING
+          POP_TREE_DEPTH_RADIAL_SPACING,
+          wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS
         );
         const reparentForbiddenIds = reparentingNodeId ? laidOut.descendants().find((d) => d.data.id === reparentingNodeId)?.descendants().map((d) => d.data.id) ?? [] : [];
         const angleOf = (d) => {
@@ -4587,7 +4731,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,
@@ -4746,7 +4890,7 @@ function WheelRadialPopCoreCore({
         )
       };
     });
-  }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
+  }, [groups, continuousAngleByRootId, sectorSpanByRootId, index]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
@@ -4856,9 +5000,9 @@ function WheelRadialPopCoreCore({
                           showNodeInfo(centerNode, chip, viewportRef.current);
                           onNodeClick?.(centerNode, nativeEvent);
                         }
-                      });
+                      }, () => focusOnNode(centerNode.id), centerNode.id);
                     },
-                    onDoubleClick: () => focusOnNode(centerNode.id),
+                    onDoubleClick: () => chipClickRef.current.doubleClick(() => focusOnNode(centerNode.id)),
                     "aria-label": centerNode.name
                   }
                 ) }) }),
@@ -4918,9 +5062,9 @@ function WheelRadialPopCoreCore({
                                   showNodeInfo(root, chip, viewportRef.current);
                                   onNodeClick?.(root, nativeEvent);
                                 }
-                              });
+                              }, () => focusOnNode(group.root.id), group.root.id);
                             },
-                            onDoubleClick: () => focusOnNode(group.root.id)
+                            onDoubleClick: () => chipClickRef.current.doubleClick(() => focusOnNode(group.root.id))
                           }
                         ) })
                       },
@@ -5015,6 +5159,7 @@ function WheelRadialPopCoreCore({
           {
             panZoom,
             orientation: controlsOrientation,
+            zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
             onFit: () => panZoom.fitToFrame([