@behindthemusictree/genre-tree-view 5.0.0 → 6.4.0

package/dist/index.cjs

@@ -51,7 +51,6 @@ module.exports = __toCommonJS(src_exports);
 // src/GenreTree.tsx
 var import_react8 = require("react");
 var d3 = __toESM(require("d3"), 1);
-var import_md6 = require("react-icons/md");
 
 // src/NodeHelper.tsx
 var import_server = __toESM(require("react-dom/server"), 1);
@@ -75,6 +74,9 @@ var MENU_WIDTH = 130;
 var PER_TREE_ACCENT_DOT = true;
 var ROOT_TINT_RATIO = 0.08;
 var POP_SECTOR_TINT_RATIO = 0.8;
+var UNDERGROUND_DARKEN_RATIO = 0.62;
+var UNDERGROUND_SECTOR_FILL_OPACITY = 0.15;
+var SCENE_SECTOR_OUTER_RADIUS = 1e5;
 var CENTER_NODE_NAME = "Mainstream Pop";
 var TREE_COLORS = [
   "#4F46E5",
@@ -156,6 +158,11 @@ function isMainstreamPopLineage(index, nodeId) {
   const topRoot = index.ancestorsOf(nodeId)[0] ?? index.byId.get(nodeId);
   return topRoot?.name === CENTER_NODE_NAME;
 }
+function shadeSurface(hex, ratio) {
+  const channel = (offset) => parseInt(hex.slice(offset, offset + 2), 16);
+  const toHex = (value) => Math.round(value * ratio).toString(16).padStart(2, "0");
+  return `#${toHex(channel(1))}${toHex(channel(3))}${toHex(channel(5))}`;
+}
 function getGenreNodeStyle(index, nodeId) {
   if (isMainstreamPopLineage(index, nodeId)) {
     return { fill: tintSurface("#ffffff", POP_SECTOR_TINT_RATIO), textColor: TEXT_COLOR };
@@ -174,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;
@@ -188,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;
@@ -244,10 +278,13 @@ function calculateRootLabelFontSize(layoutFontSize, zoomScale) {
   return Math.max(layoutFontSize, ROOT_LABEL_MIN_SCREEN_PX / zoomScale);
 }
 var NODE_DOT_MIN_RADIUS = 3;
-var NODE_DOT_MAX_RADIUS = 50;
+var NODE_DOT_MAX_RADIUS = 24;
 var NODE_DOT_LABEL_GAP = 6;
+var NODE_LAYOUT_SLOT_RADIUS = 8;
 function calculateNodeDotRadius(itemCount, range) {
-  return NODE_DOT_MIN_RADIUS + logarithmicPosition(itemCount, range) * (NODE_DOT_MAX_RADIUS - NODE_DOT_MIN_RADIUS);
+  const minArea = NODE_DOT_MIN_RADIUS ** 2;
+  const maxArea = (range.maxDotRadius ?? NODE_DOT_MAX_RADIUS) ** 2;
+  return Math.sqrt(minArea + logarithmicPosition(itemCount, range) * (maxArea - minArea));
 }
 var WHEEL_RADIUS = 260;
 var WHEEL_VIEWPORT_HEIGHT = WHEEL_RADIUS * 2 + MAX_NODE_HEIGHT / 2;
@@ -281,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;
 }
@@ -377,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(
@@ -445,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;
@@ -470,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, "_");
@@ -634,6 +703,48 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
   return svg;
 }
 
+// src/FloatingControls.tsx
+var import_ui = require("@behindthemusictree/ui");
+
+// src/BusyIndicator.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BusyIndicator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gtv-busy", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gtv-busy-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Updating genre tree\u2026" })
+  ] });
+}
+
+// src/FloatingControls.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FloatingControls({ panZoom, onFit, orientation, zoomControls, leading, busy }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: [
+        "gtv-wheel-floating-controls",
+        orientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
+      ].filter(Boolean).join(" "),
+      children: [
+        busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BusyIndicator, {}),
+        leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gtv-floating-controls-leading", children: leading }),
+        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"
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/use-pan-zoom.ts
 var import_react = require("react");
 
@@ -1032,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);
@@ -1188,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() };
 }
 
@@ -1274,9 +1389,9 @@ var import_md4 = require("react-icons/md");
 
 // src/InfoPanelExpandButton.tsx
 var import_md = require("react-icons/md");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "button",
@@ -1284,7 +1399,7 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
       style,
       onClick: () => onExpandedChange(!expanded),
       "aria-label": expanded ? "Collapse panel" : "Expand panel",
-      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_md.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_md.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 })
     }
   );
 }
@@ -1292,11 +1407,11 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
 // src/InfoPanelSection.tsx
 var import_react4 = require("react");
 var import_md2 = require("react-icons/md");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function InfoPanelSection({ title, children }) {
   const [open, setOpen] = (0, import_react4.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-children", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         type: "button",
@@ -1304,8 +1419,8 @@ function InfoPanelSection({ title, children }) {
         "aria-expanded": open,
         onClick: () => setOpen((isOpen) => !isOpen),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "gtv-info-panel-children-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md2.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-children-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md2.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
         ]
       }
     ),
@@ -1318,7 +1433,7 @@ var import_react5 = require("react");
 var import_md3 = require("react-icons/md");
 var import_fa = require("react-icons/fa");
 var import_pi2 = require("react-icons/pi");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function NodeToolbar({
   node,
   playingNodeId,
@@ -1339,9 +1454,9 @@ function NodeToolbar({
   const isPlayable = node.itemCount > 0;
   const isThisPlaying = playingNodeId === node.id;
   const playLabel = isThisPlaying && playState === "playing" ? "Pause" : isThisPlaying && playState === "loading" ? "Loading..." : "Play";
-  const playIcon = isThisPlaying && playState === "playing" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaPause, { className: "gtv-icon", size: "0.6em" }) : isThisPlaying && playState === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaSpinner, { className: "gtv-icon gtv-icon--spin", size: "0.6em" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaPlay, { className: "gtv-icon", size: "0.6em" });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["gtv-toolbar", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const playIcon = isThisPlaying && playState === "playing" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPause, { className: "gtv-icon", size: "0.6em" }) : isThisPlaying && playState === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaSpinner, { className: "gtv-icon gtv-icon--spin", size: "0.6em" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPlay, { className: "gtv-icon", size: "0.6em" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["gtv-toolbar", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -1353,8 +1468,8 @@ function NodeToolbar({
         children: playIcon
       }
     ),
-    isActionable && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    isActionable && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -1362,13 +1477,13 @@ function NodeToolbar({
           title: "Add sub-genre",
           "aria-label": "Add sub-genre",
           onClick: () => onAddChild?.(node.id),
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaPlus, { className: "gtv-icon", size: "0.6em" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPlus, { className: "gtv-icon", size: "0.6em" })
         }
       ),
       primaryExtraActions.map((action) => {
         const enabled = action.enabled ? action.enabled(node) : true;
         const label = action.label(node);
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -1382,8 +1497,8 @@ function NodeToolbar({
           action.key
         );
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gtv-toolbar-overflow", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-toolbar-overflow", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -1393,11 +1508,11 @@ function NodeToolbar({
             "aria-haspopup": "menu",
             "aria-expanded": menuOpen,
             onClick: () => setMenuOpen((open) => !open),
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md3.MdMoreVert, { size: "0.6em" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md3.MdMoreVert, { size: "0.6em" })
           }
         ),
-        menuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        menuOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               type: "button",
@@ -1407,12 +1522,12 @@ function NodeToolbar({
                 onRenameRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md3.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: "Rename" })
+                /* @__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" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               type: "button",
@@ -1422,14 +1537,14 @@ function NodeToolbar({
                 onReparentRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_pi2.PiGraphFill, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: "Change parent" })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_pi2.PiGraphFill, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Change parent" })
               ]
             }
           ),
           overflowExtraActions.map((action) => {
             const enabled = action.enabled ? action.enabled(node) : true;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 type: "button",
@@ -1440,15 +1555,15 @@ function NodeToolbar({
                   action.onClick(event, node);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: action.icon(node) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: action.label(node) })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: action.icon(node) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: action.label(node) })
                 ]
               },
               action.key
             );
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gtv-menu-divider" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "gtv-menu-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               type: "button",
@@ -1458,8 +1573,8 @@ function NodeToolbar({
                 onDeleteRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaTrashAlt, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: "Delete" })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaTrashAlt, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Delete" })
               ]
             }
           )
@@ -1470,7 +1585,7 @@ function NodeToolbar({
 }
 
 // src/InfoPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MINI_NODE_MIN_DIAMETER = 14;
 var MINI_NODE_MAX_DIAMETER = 32;
 var MINI_NODE_MIN_FONT_SIZE = 10;
@@ -1502,10 +1617,6 @@ function InfoPanel({
   onZoomIn,
   actions,
   readOnly = false,
-  editMode = false,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded = false,
   onExpandedChange,
@@ -1513,13 +1624,32 @@ 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]);
-  const editing = editMode && !readOnly;
-  const shownParent = editing && renderParentsEditor ? null : parentNode;
   const miniTreeRange = getItemCountRange([
-    ...shownParent ? [shownParent.node] : [],
+    ...parentNode ? [parentNode.node] : [],
     node,
     ...childNodes.map((child) => child.node)
   ]);
@@ -1533,9 +1663,9 @@ function InfoPanel({
   };
   const miniNodeContent = (target, background, range) => {
     const { diameter, fontSize } = miniNodeSize(target, range);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-mini-dot", style: { background, width: diameter, height: diameter } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-mini-label", style: { fontSize }, children: target.name })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "gtv-info-panel-mini-dot", style: { background, width: diameter, height: diameter } }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "gtv-info-panel-mini-label", style: { fontSize }, children: target.name })
     ] });
   };
   const sortedChildNodes = [...childNodes].sort((a, b) => b.node.itemCount - a.node.itemCount);
@@ -1548,9 +1678,9 @@ function InfoPanel({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [expanded, onExpandedChange]);
-  const dangerZone = editing && renderDangerZone && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "gtv-info-panel-danger-zone", children: renderDangerZone(node) });
-  const toolbar = actions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NodeToolbar, { node, className: "gtv-info-panel-toolbar", ...actions }, node.id) : null;
-  const ancestors = ancestorNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoPanelSection, { title: "Ancestors", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "gtv-info-panel-children-list gtv-info-panel-ancestors-list", children: ancestorNodes.map(({ node: ancestor, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const dangerZone = !readOnly && renderDangerZone && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "gtv-info-panel-danger-zone", children: renderDangerZone(node) });
+  const toolbar = actions ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NodeToolbar, { node, className: "gtv-info-panel-toolbar", ...actions }, node.id) : null;
+  const ancestors = ancestorNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelSection, { title: "Ancestors", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "gtv-info-panel-children-list gtv-info-panel-ancestors-list", children: ancestorNodes.map(({ node: ancestor, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       type: "button",
@@ -1560,76 +1690,85 @@ function InfoPanel({
       children: miniNodeContent(ancestor, fill2, ancestorRange)
     }
   ) }, ancestor.id)) }) }) : null;
-  const family = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    editing && renderParentsEditor && renderParentsEditor(node),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoPanelSection, { title: "Family", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-mini-tree", children: [
-      shownParent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "gtv-info-panel-mini-tree-parent", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const family = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelSection, { title: "Family", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-mini-tree", children: [
+    parentNode && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "gtv-info-panel-mini-tree-parent", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "gtv-info-panel-child",
+        title: parentNode.node.name,
+        onClick: () => onSelectNode(parentNode.node.id),
+        children: miniNodeContent(parentNode.node, parentNode.fill, miniTreeRange)
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: `gtv-info-panel-mini-tree-node${childNodes.length === 0 ? " gtv-info-panel-mini-tree-node--leaf" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: "gtv-info-panel-child gtv-info-panel-mini-tree-current",
+            title: node.name,
+            children: miniNodeContent(node, fill, miniTreeRange)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-mini-tree-children", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
+        childNodes.length,
+        " ",
+        childNodes.length <= 1 ? "child" : "children"
+      ] }),
+      childNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "gtv-info-panel-children-list", children: sortedChildNodes.map(({ node: child, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
           className: "gtv-info-panel-child",
-          title: shownParent.node.name,
-          onClick: () => onSelectNode(shownParent.node.id),
-          children: miniNodeContent(shownParent.node, shownParent.fill, miniTreeRange)
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
-        {
-          className: `gtv-info-panel-mini-tree-node${childNodes.length === 0 ? " gtv-info-panel-mini-tree-node--leaf" : ""}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "span",
-            {
-              className: "gtv-info-panel-child gtv-info-panel-mini-tree-current",
-              title: node.name,
-              children: miniNodeContent(node, fill, miniTreeRange)
-            }
-          )
+          title: child.name,
+          onClick: () => onSelectNode(child.id),
+          children: miniNodeContent(child, fill2, miniTreeRange)
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-mini-tree-children", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
-          childNodes.length,
-          " ",
-          childNodes.length <= 1 ? "child" : "children"
-        ] }),
-        childNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "gtv-info-panel-children-list", children: sortedChildNodes.map(({ node: child, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "gtv-info-panel-child",
-            title: child.name,
-            onClick: () => onSelectNode(child.id),
-            children: miniNodeContent(child, fill2, miniTreeRange)
-          }
-        ) }, child.id)) })
-      ] })
-    ] }) })
-  ] });
-  const itemCount = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("dl", { className: "gtv-info-panel-fields", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dt", { children: itemCountLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dd", { children: node.itemCount })
+      ) }, child.id)) })
+    ] })
+  ] }) }) });
+  const itemCount = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("dl", { className: "gtv-info-panel-fields", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: itemCountLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { children: node.itemCount })
   ] });
-  const { primary, aside } = renderInfoPanelBody ? renderInfoPanelBody(node, { toolbar, ancestors, family, itemCount }) : { primary: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+  const { primary, aside } = renderInfoPanelBody ? renderInfoPanelBody(node, { toolbar, ancestors, family, itemCount }) : { primary: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     toolbar,
     ancestors,
     family,
     itemCount
   ] }) };
   const hasAside = aside !== void 0 && aside !== null && aside !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  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_runtime5.jsxs)(
+        /* @__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",
           {
             className: "gtv-info-panel-header",
             style: { background: fill, color: textColor },
             children: [
-              onPrevious && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              onPrevious && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1638,21 +1777,21 @@ function InfoPanel({
                   onClick: onPrevious,
                   "aria-label": previousLabel ? `Previous: ${previousLabel}` : "Previous",
                   title: previousLabel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md4.MdArrowBack, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdArrowBack, { className: "gtv-icon", size: 16 })
                 }
               ),
-              editing && renderTitleEditor ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "gtv-info-panel-title gtv-info-panel-title--editor", children: renderTitleEditor(node) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "span",
                 {
                   className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`,
                   style: { color: textColor },
                   children: [
                     node.name,
-                    node.umbrella && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-umbrella-badge", children: "umbrella" })
+                    node.umbrella && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "gtv-info-panel-umbrella-badge", children: "umbrella" })
                   ]
                 }
               ),
-              onZoomIn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              onZoomIn && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1661,22 +1800,11 @@ function InfoPanel({
                   onClick: onZoomIn,
                   "aria-label": "Zoom in",
                   title: "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md4.MdZoomIn, { className: "gtv-icon", size: 16 })
-                }
-              ),
-              onEditModeChange && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-info-panel-edit",
-                  style: { color: textColor },
-                  onClick: () => onEditModeChange(!editMode),
-                  "aria-pressed": editMode,
-                  children: editMode ? "Done" : "Edit"
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdZoomIn, { className: "gtv-icon", size: 16 })
                 }
               ),
-              onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
-              !hideClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
+              !hideClose && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1684,18 +1812,18 @@ function InfoPanel({
                   style: { color: textColor },
                   onClick: onClose,
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md4.MdClose, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md4.MdClose, { className: "gtv-icon", size: 16 })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-primary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-primary", children: [
             primary,
             expanded && !hasAside && dangerZone
           ] }),
-          hasAside && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-aside", children: [
+          hasAside && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-aside", children: [
             aside,
             expanded && dangerZone
           ] })
@@ -1709,7 +1837,7 @@ function InfoPanel({
 // src/OverlayPanel.tsx
 var import_react7 = require("react");
 var import_md5 = require("react-icons/md");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function OverlayPanel({
   title,
   content,
@@ -1744,21 +1872,21 @@ function OverlayPanel({
     expanded && !extraContent && "gtv-info-panel--expanded-solo",
     collapsed && "gtv-info-panel--collapsed"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, ref: panelRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-info-panel-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
-      onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange }),
-      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, ref: panelRef, children: [
+    /* @__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_md5.MdClose, { className: "gtv-icon", size: 16 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-info-panel-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
-      extraContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "gtv-info-panel-primary gtv-overlay-content", children: extraContent })
+    /* @__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 }),
+      extraContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-info-panel-primary gtv-overlay-content", children: extraContent })
     ] })
   ] });
 }
 
 // src/GenreTree.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function GenreTree({
   nodes,
   className,
@@ -1785,11 +1913,9 @@ function GenreTree({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -1799,7 +1925,10 @@ function GenreTree({
   wheelZoom,
   defaultViewport,
   onViewportChange,
-  controlsOrientation = "vertical"
+  controlsOrientation = "vertical",
+  showZoomControls = "auto",
+  floatingControlsLeading,
+  busy
 }) {
   const index = useTreeIndex(nodes);
   const svgRef = (0, import_react8.useRef)(null);
@@ -1807,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;
@@ -1821,7 +1954,8 @@ function GenreTree({
       d3,
       root,
       orientation,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const {
       svgWidth: width,
@@ -1833,7 +1967,8 @@ function GenreTree({
       originalTreeData,
       orientation,
       hideRoot,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     const reshapedTreeData = setupTreeLayout(
       d3,
@@ -1842,7 +1977,8 @@ function GenreTree({
       orientation,
       rootDepthOffset,
       width,
-      depthSpacingScale
+      depthSpacingScale,
+      itemCountRange
     );
     return {
       treeData: reshapedTreeData,
@@ -1850,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);
@@ -1901,7 +2037,8 @@ function GenreTree({
       },
       orientation,
       hideRoot,
-      effectiveSelectedNodeId
+      effectiveSelectedNodeId,
+      itemCountRange
     );
   }, [
     treeData,
@@ -1922,7 +2059,8 @@ function GenreTree({
     additionalActions,
     orientation,
     hideRoot,
-    effectiveSelectedNodeId
+    effectiveSelectedNodeId,
+    itemCountRange
   ]);
   (0, import_react8.useEffect)(() => {
     if (!interactive || !selectedNodeIdProp) return;
@@ -1955,7 +2093,7 @@ function GenreTree({
     hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
-  const svg = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const svg = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       ref: svgRef,
@@ -1965,13 +2103,14 @@ function GenreTree({
     }
   );
   if (!interactive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, children: svg });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: svg });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref: viewportRef,
       className,
+      "aria-busy": busy,
       style: {
         position: "relative",
         overflow: "hidden",
@@ -1994,7 +2133,7 @@ function GenreTree({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             ref: stageRef,
@@ -2008,7 +2147,7 @@ function GenreTree({
             children: svg
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -2058,10 +2197,6 @@ function GenreTree({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -2080,54 +2215,16 @@ function GenreTree({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(import_md6.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(import_md6.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current)),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md6.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            zoomControls: showZoomControls,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
           }
         )
       ]
@@ -2137,7 +2234,6 @@ function GenreTree({
 
 // src/GenreTreeWheelBase.tsx
 var import_react9 = require("react");
-var import_md7 = require("react-icons/md");
 var d32 = __toESM(require("d3"), 1);
 
 // src/root-grouping.ts
@@ -2213,7 +2309,7 @@ function computeRotationForSelection(currentRotationDeg, targetAngle, landingAng
 }
 
 // src/GenreTreeWheelBase.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function WheelCore({
   nodes,
   className,
@@ -2238,11 +2334,9 @@ function WheelCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -2253,8 +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";
@@ -2264,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]
@@ -2314,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(
@@ -2368,10 +2472,11 @@ function WheelCore({
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, effectiveRootId, nodes, panel, showNodeInfo]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         direction === "left" && "gtv-wheel-container--left",
@@ -2386,7 +2491,7 @@ function WheelCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             ref: stageRef,
@@ -2399,7 +2504,7 @@ function WheelCore({
               transform: panZoom.transform,
               transformOrigin: "0 0"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
                 className: "gtv-wheel-stage",
@@ -2407,11 +2512,13 @@ function WheelCore({
                   [chipHalfExtentVar]: `${rootChipHalfExtent}px`
                 },
                 children: [
-                  selectedGroup && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-tree-anchor", ref: treeAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  selectedGroup && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-tree-anchor", ref: treeAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     GenreTree,
                     {
                       nodes: selectedGroup.nodes,
                       itemCountLabel,
+                      itemCountScaleMax,
+                      nodeCountForSizing: fullNodeCountForSizing,
                       orientation: treeOrientation,
                       hideRoot: true,
                       interactive: false,
@@ -2445,9 +2552,9 @@ function WheelCore({
                     },
                     selectedGroup.root.id
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-                  centerLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+                  centerLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       className: "gtv-wheel",
@@ -2455,7 +2562,7 @@ function WheelCore({
                         "--gtv-wheel-rotation": `${rotationDeg}deg`
                       },
                       children: [
-                        sectorFillGradient && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        sectorFillGradient && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "div",
                           {
                             className: "gtv-wheel-sector-fill",
@@ -2464,7 +2571,7 @@ function WheelCore({
                             }
                           }
                         ),
-                        groups.length > 1 && groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        groups.length > 1 && groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "div",
                           {
                             className: "gtv-wheel-divider",
@@ -2487,12 +2594,12 @@ function WheelCore({
                             rootItemCount,
                             rootItemCountRange
                           );
-                          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "div",
                             {
                               className: "gtv-wheel-slot",
                               style: { "--gtv-chip-angle": `${angle}deg` },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                                 "button",
                                 {
                                   type: "button",
@@ -2528,8 +2635,8 @@ function WheelCore({
                                     }
                                   },
                                   children: [
-                                    PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "gtv-wheel-chip-dot" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                    PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "gtv-wheel-chip-dot" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                       "span",
                                       {
                                         className: "gtv-node-label gtv-node-label--root",
@@ -2552,7 +2659,7 @@ function WheelCore({
             )
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -2599,10 +2706,6 @@ function WheelCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -2621,57 +2724,19 @@ function WheelCore({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(import_md7.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(import_md7.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([
-                    wheelCircleRef.current,
-                    ...queryTreeContentElements(treeAnchorRef.current)
-                  ]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md7.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            zoomControls: showZoomControls,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([
+              wheelCircleRef.current,
+              ...queryTreeContentElements(treeAnchorRef.current)
+            ])
           }
         )
       ]
@@ -2680,37 +2745,50 @@ function WheelCore({
 }
 
 // src/GenreTreeWheel.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function GenreTreeWheel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WheelCore, { ...props, direction: "bottom" });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WheelCore, { ...props, direction: "bottom" });
 }
 
 // src/GenreTreeWheelRight.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function GenreTreeWheelRight(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WheelCore, { ...props, direction: "left" });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WheelCore, { ...props, direction: "left" });
 }
 
 // src/GenreTreeWheelRadialBase.tsx
 var import_react10 = require("react");
-var import_md8 = require("react-icons/md");
 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
@@ -2877,6 +2955,7 @@ function pickEmptyLabelSpot(area, width, height, obstacles, prefer = () => true)
 var POP_WEDGE_SPAN_DEGREES = 80;
 var POP_SUBTREE_OUTER_MARGIN = 24;
 var POP_HIERARCHY_ROOT_ABSOLUTE_DEPTH = 1;
+var DOT_RADIUS_TRANSITION_MS = 250;
 function getRadialDepthRadius(depth, coreRootCircleRadius, depthSpacing) {
   return coreRootCircleRadius + depth * depthSpacing;
 }
@@ -2899,14 +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, itemCountRange) {
+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),
-    itemCountRange
+    "center",
+    dotRadius
   );
 }
 var MIN_DOT_GAP = 5.6;
@@ -2916,15 +2996,15 @@ function popRadiusOfDepth(coreRootCircleRadius, depthSpacing) {
 function coreRadiusOfDepth(coreRootCircleRadius, depthSpacing) {
   return (depth) => getRadialDepthRadius(depth + 1, coreRootCircleRadius, depthSpacing);
 }
-function measureWedge(_d3Lib, hierarchy, radiusOfDepth, itemCountRange) {
-  const dotRadius = (d) => itemCountRange ? calculateNodeDotRadius(d.data.itemCount, itemCountRange) : NODE_DOT_MAX_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(node) };
+    const own = { x: 0, dotRadius: slotRadius() };
     if (!node.children) return [{ left: own, right: own }];
     const below = [];
     const childOffsets = [];
@@ -2956,7 +3036,7 @@ function measureWedge(_d3Lib, hierarchy, radiusOfDepth, itemCountRange) {
   let min = Infinity;
   let max = -Infinity;
   hierarchy.each((d) => {
-    const inset = (dotRadius(d) + 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);
   });
@@ -2966,13 +3046,44 @@ function measureWedge(_d3Lib, hierarchy, radiusOfDepth, itemCountRange) {
   return max - min;
 }
 var MAX_WEDGE_STRETCH = 1.42;
-function layoutWedge(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, radiusOfDepth, itemCountRange) {
-  const neededRad = measureWedge(d3Lib, hierarchy, radiusOfDepth, itemCountRange);
+function splitAtBranching(hierarchy) {
+  let branching = hierarchy;
+  const chain = [];
+  while (branching.children?.length === 1) {
+    chain.push(branching);
+    branching = branching.children[0];
+  }
+  const children = branching.children;
+  return children && children.length > 1 ? { chain, branching, children } : null;
+}
+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 wedgeStartRad = wedgeCenterAngleDegrees * Math.PI / 180 - neededRad * scale / 2;
+  const wedgeCenterRad = wedgeCenterAngleDegrees * Math.PI / 180;
+  const centeredStartRad = wedgeCenterRad - neededRad * scale / 2;
+  const branchingSplit = slack === "between-children" ? splitAtBranching(hierarchy) : null;
+  if (!branchingSplit) {
+    hierarchy.each((d) => {
+      const angleRad = centeredStartRad + d.x * scale;
+      const radius = radiusOfDepth(d.depth);
+      d.x = radius * Math.sin(angleRad);
+      d.y = -radius * Math.cos(angleRad);
+    });
+    return hierarchy;
+  }
+  const { chain, branching, children } = branchingSplit;
+  const gap = Math.max(0, wedgeSpanRad - neededRad * scale) / (children.length - 1);
+  const wedgeStartRad = wedgeCenterRad - wedgeSpanRad / 2;
+  const angleOffsetRad = /* @__PURE__ */ new Map();
+  hierarchy.each((d) => angleOffsetRad.set(d, d.x * scale));
+  children.forEach((child, i) => {
+    child.each((d) => angleOffsetRad.set(d, angleOffsetRad.get(d) + i * gap));
+  });
+  const recenter = gap * (children.length - 1) / 2;
+  [...chain, branching].forEach((d) => angleOffsetRad.set(d, angleOffsetRad.get(d) + recenter));
   hierarchy.each((d) => {
-    const angleRad = wedgeStartRad + d.x * scale;
+    const angleRad = wedgeStartRad + angleOffsetRad.get(d);
     const radius = radiusOfDepth(d.depth);
     d.x = radius * Math.sin(angleRad);
     d.y = -radius * Math.cos(angleRad);
@@ -3059,7 +3170,8 @@ function renderPopSubtree(d3Lib, svg, hierarchy, rootColor, reparentingNodeId, r
     rootLinkOrigin,
     isMainstreamSector = false,
     selectedNodeId = null,
-    nodeFillOf
+    nodeFillOf,
+    dotRadiusMemory
   } = options;
   const { onReparentTargetSelect, onNodeClick, onNodeDoubleClick, onNodeHover } = callbacks;
   const isForbidden = (d) => reparentForbiddenIds.includes(d.data.id);
@@ -3122,13 +3234,18 @@ function renderPopSubtree(d3Lib, svg, hierarchy, rootColor, reparentingNodeId, r
     );
     d3Lib.select(this).attr("x", hitArea.x0).attr("y", hitArea.y0).attr("width", hitArea.x1 - hitArea.x0).attr("height", hitArea.y1 - hitArea.y0);
   }).attr("fill", "transparent").attr("pointer-events", "all");
-  nodes.append("circle").attr("class", "gtv-node-dot").attr("r", (d) => calculateNodeDotRadius(d.data.itemCount, itemCountRange)).attr("fill", nodeFill).attr(
+  const targetDotRadius = (d) => calculateNodeDotRadius(d.data.itemCount, itemCountRange);
+  const animateDots = dotRadiusMemory !== void 0 && !(typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+  const startDotRadius = (d) => (animateDots ? dotRadiusMemory?.get(d.data.id) : void 0) ?? targetDotRadius(d);
+  nodes.append("circle").attr("class", "gtv-node-dot").attr("r", startDotRadius).attr("fill", nodeFill).attr(
     "stroke",
     (d) => isSelected(d) ? ACCENT_COLOR : isMainstreamSector ? TEXT_COLOR : SURFACE_BORDER_COLOR
   ).attr(
     "stroke-width",
     (d) => isSelected(d) ? calculateSelectedNodeBorderWidth(calculateNodeDotRadius(d.data.itemCount, itemCountRange)) : calculateNodeBorderWidth(d.data.itemCount, itemCountRange)
-  ).style("pointer-events", "none");
+  ).style("pointer-events", "none").filter((d) => startDotRadius(d) !== targetDotRadius(d)).transition().duration(DOT_RADIUS_TRANSITION_MS).ease(d3Lib.easeCubicOut).attr("r", targetDotRadius);
+  nodes.each((d) => dotRadiusMemory?.set(d.data.id, targetDotRadius(d)));
+  nodes.sort((a, b) => targetDotRadius(b) - targetDotRadius(a));
   nodes.append("text").attr(
     "class",
     "gtv-node-label"
@@ -3169,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) {
@@ -3251,14 +3368,15 @@ function buildCoreHierarchy(d3Lib, coreNodes) {
   });
   return hierarchy;
 }
-function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing, itemCountRange) {
+function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing, dotRadius = NODE_LAYOUT_SLOT_RADIUS) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
     coreRadiusOfDepth(coreRootCircleRadius, depthSpacing),
-    itemCountRange
+    "between-children",
+    dotRadius
   );
 }
 function calculateCoreSubtreeRadialExtent(hierarchy, depthSpacing, coreRootCircleRadius = 0) {
@@ -3298,7 +3416,7 @@ function splitRootGroupBySide(group) {
 }
 
 // src/GenreTreeWheelRadialBase.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var LANDING_ANGLE = 90;
 function computeContinuousAngles(groups, layout, previous) {
   const angles = /* @__PURE__ */ new Map();
@@ -3332,11 +3450,9 @@ function WheelRadialCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -3347,8 +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);
@@ -3401,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;
@@ -3455,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;
@@ -3505,8 +3629,7 @@ function WheelRadialCore({
           angle,
           span,
           wheelRadius,
-          POP_TREE_DEPTH_RADIAL_SPACING,
-          wheelItemCountRange
+          POP_TREE_DEPTH_RADIAL_SPACING
         );
         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-core-branch").attr("data-gtv-branch-index", branchIndex);
@@ -3622,10 +3745,11 @@ function WheelRadialCore({
       };
     });
   }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         "gtv-wheel-container--radial",
@@ -3639,7 +3763,7 @@ function WheelRadialCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             ref: stageRef,
@@ -3652,9 +3776,9 @@ function WheelRadialCore({
               transform: panZoom.transform,
               transformOrigin: "0 0"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "gtv-wheel-stage", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel", children: sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gtv-wheel-stage", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel", children: sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   className: "gtv-wheel-sector",
@@ -3666,7 +3790,7 @@ function WheelRadialCore({
                 },
                 `sector-${sector.rootId}`
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "svg",
                 {
                   ref: coreSvgRef,
@@ -3675,9 +3799,9 @@ function WheelRadialCore({
                   height: wheelRadius * 2
                 }
               ),
-              centerLabel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "gtv-wheel", children: [
-                dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              centerLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gtv-wheel", children: [
+                dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     className: "gtv-wheel-divider",
@@ -3700,12 +3824,12 @@ function WheelRadialCore({
                     rootItemCount,
                     rootItemCountRange
                   );
-                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-slot",
                       style: { "--gtv-chip-angle": `${angle}deg` },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -3738,8 +3862,8 @@ function WheelRadialCore({
                             }
                           },
                           children: [
-                            PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "gtv-wheel-chip-dot" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "gtv-wheel-chip-dot" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "span",
                               {
                                 className: "gtv-node-label gtv-node-label--root",
@@ -3758,7 +3882,7 @@ function WheelRadialCore({
             ] })
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -3804,10 +3928,6 @@ function WheelRadialCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -3826,54 +3946,16 @@ function WheelRadialCore({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "div",
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_md8.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_md8.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_md8.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            zoomControls: showZoomControls,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
           }
         )
       ]
@@ -3882,14 +3964,13 @@ function WheelRadialCore({
 }
 
 // src/GenreTreeWheelRadial.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function GenreTreeWheelRadial(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WheelRadialCore, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(WheelRadialCore, { ...props });
 }
 
 // src/GenreTreeWheelRadialPopCoreBase.tsx
 var import_react13 = require("react");
-var import_md10 = require("react-icons/md");
 var d34 = __toESM(require("d3"), 1);
 
 // src/use-focus-history.ts
@@ -3918,17 +3999,17 @@ function useFocusHistory(focusNodeId, isFocusable) {
 
 // src/WheelBreadcrumb.tsx
 var import_react12 = require("react");
-var import_md9 = require("react-icons/md");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+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;
 function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
   const [expanded, setExpanded] = (0, import_react12.useState)(false);
   const collapsed = !expanded && ancestors.length > MAX_VISIBLE_ANCESTORS;
   const visibleAncestors = collapsed ? ancestors.slice(-ANCESTORS_KEPT_WHEN_COLLAPSED) : ancestors;
-  const separator = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", children: "\u203A" });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("nav", { className: "gtv-wheel-breadcrumb", "aria-label": "Breadcrumb", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const separator = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u203A" });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("nav", { className: "gtv-wheel-breadcrumb", "aria-label": "Breadcrumb", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -3936,12 +4017,12 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
         "aria-label": "All genres",
         title: "All genres",
         onClick: onHome,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_md9.MdHome, { className: "gtv-icon", size: 14 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md6.MdHome, { className: "gtv-icon", size: 14 })
       }
     ),
     separator,
-    collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    collapsed && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -3954,11 +4035,11 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
       ),
       separator
     ] }),
-    visibleAncestors.map((ancestor) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "gtv-wheel-breadcrumb-crumb", onClick: () => onAncestor(ancestor.id), children: ancestor.name }),
+    visibleAncestors.map((ancestor) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "gtv-wheel-breadcrumb-crumb", onClick: () => onAncestor(ancestor.id), children: ancestor.name }),
       separator
     ] }, ancestor.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "gtv-wheel-breadcrumb-current", "aria-current": "page", children: currentName })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gtv-wheel-breadcrumb-current", "aria-current": "page", children: currentName })
   ] });
 }
 
@@ -4019,7 +4100,7 @@ function resolvePopCoreFrame(nodes, focusNodeId) {
 }
 
 // src/GenreTreeWheelRadialPopCoreBase.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var LANDING_ANGLE2 = 90;
 var CHIP_GAP = 16;
 var sum = (values) => values.reduce((total, value) => total + value, 0);
@@ -4055,11 +4136,9 @@ function WheelRadialPopCoreCore({
   hideInfoPanelClose = false,
   hideInfoPanelTitle = false,
   itemCountLabel,
+  itemCountScaleMax,
+  nodeCountForSizing,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -4070,11 +4149,15 @@ function WheelRadialPopCoreCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  showZoomControls = "auto",
+  floatingControlsLeading,
+  busy,
   allowWheelRotation = true,
   selectedNodeId,
   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,
@@ -4142,6 +4225,7 @@ function WheelRadialPopCoreCore({
   }
   const viewportRef = (0, import_react13.useRef)(null);
   const stageRef = (0, import_react13.useRef)(null);
+  const dotRadiusMemoryRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
   const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
   const { panel: openPanel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const isInFrame = (id) => id === focusNodeId || centerSubtreeNodeIds.has(id) || ringRootById.has(id);
@@ -4213,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;
@@ -4248,8 +4332,8 @@ function WheelRadialPopCoreCore({
       centerSubtreeHierarchy,
       0,
       POP_TREE_DEPTH_RADIAL_SPACING
-    ) : centerChipDiameter / 2,
-    [centerSubtreeHierarchy, centerChipDiameter]
+    ) : wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS,
+    [centerSubtreeHierarchy, wheelItemCountRange.maxDotRadius]
   );
   const maxCoreExtentDelta = (0, import_react13.useMemo)(() => {
     let extent = 0;
@@ -4257,11 +4341,7 @@ function WheelRadialPopCoreCore({
       core.forEach((hierarchy) => {
         extent = Math.max(
           extent,
-          calculateCoreSubtreeRadialExtent(
-            hierarchy,
-            POP_TREE_DEPTH_RADIAL_SPACING,
-            0
-          )
+          calculateCoreSubtreeRadialExtent(hierarchy, POP_TREE_DEPTH_RADIAL_SPACING, 0)
         );
       });
     });
@@ -4275,7 +4355,8 @@ function WheelRadialPopCoreCore({
     (radius) => new Map(
       groups.map((group) => {
         const { pop, core } = branchHierarchiesByRootId.get(group.root.id);
-        const chipWidth = 2 * calculateNodeDotRadius(rootItemCountById.get(group.root.id), wheelItemCountRange);
+        const dotRadius = wheelItemCountRange.maxDotRadius ?? NODE_LAYOUT_SLOT_RADIUS;
+        const chipWidth = 2 * dotRadius;
         return [
           group.root.id,
           {
@@ -4284,7 +4365,7 @@ function WheelRadialPopCoreCore({
                 d34,
                 hierarchy,
                 popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
-                wheelItemCountRange
+                dotRadius
               )
             ),
             core: core.map(
@@ -4292,7 +4373,7 @@ function WheelRadialPopCoreCore({
                 d34,
                 hierarchy,
                 coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
-                wheelItemCountRange
+                dotRadius
               )
             ),
             chip: 2 * Math.asin(Math.min(1, (chipWidth / 2 + CHIP_GAP) / radius))
@@ -4300,7 +4381,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId, rootItemCountById, wheelItemCountRange]
+    [groups, branchHierarchiesByRootId, wheelItemCountRange.maxDotRadius]
   );
   const coreRootCircleRadius = (0, import_react13.useMemo)(
     () => solveRingRadius(
@@ -4310,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),
@@ -4419,7 +4500,7 @@ function WheelRadialPopCoreCore({
           coreRootCircleRadius,
           span,
           POP_TREE_DEPTH_RADIAL_SPACING,
-          wheelItemCountRange
+          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);
@@ -4463,6 +4544,7 @@ function WheelRadialPopCoreCore({
           {
             rootLinkOrigin,
             selectedNodeId: panel?.node.id ?? null,
+            dotRadiusMemory: dotRadiusMemoryRef.current,
             nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
           }
         );
@@ -4475,6 +4557,9 @@ function WheelRadialPopCoreCore({
       );
       const sectorGroup = originGroup.append("g").attr("class", "gtv-wheel-core-sector").attr("data-gtv-root-id", rootId);
       branches.forEach(({ hierarchy, angle, span }, branchIndex) => {
+        const undergroundIds = new Set(
+          hierarchy.descendants().filter((d) => d.ancestors().some((a) => a.data.scene === "underground")).map((d) => d.data.id)
+        );
         const laidOut = computeCoreRadialLayout(
           d34,
           hierarchy,
@@ -4482,9 +4567,33 @@ function WheelRadialPopCoreCore({
           span,
           coreRootCircleRadius,
           POP_TREE_DEPTH_RADIAL_SPACING,
-          wheelItemCountRange
+          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) => {
+          const deg = Math.atan2(d.x, -d.y) * 180 / Math.PI;
+          return angle + ((deg - angle + 540) % 360 + 360) % 360 - 180;
+        };
+        const subtreeRange = (d) => {
+          const angles = d.descendants().map(angleOf);
+          return { min: Math.min(...angles), max: Math.max(...angles) };
+        };
+        laidOut.descendants().filter((d) => d.data.scene === "underground" && !d.ancestors().slice(1).some((a) => a.data.scene === "underground")).forEach((ug) => {
+          const mine = subtreeRange(ug);
+          const siblings = ug.parent?.children ?? [];
+          const at = siblings.indexOf(ug);
+          const prev = at > 0 ? siblings[at - 1] : void 0;
+          const next = at >= 0 ? siblings[at + 1] : void 0;
+          const startDeg = prev ? (subtreeRange(prev).max + mine.min) / 2 : angle - span / 2;
+          const endDeg = next ? (mine.max + subtreeRange(next).min) / 2 : angle + span / 2;
+          const arcPath = d34.arc()({
+            innerRadius: coreRootCircleRadius,
+            outerRadius: SCENE_SECTOR_OUTER_RADIUS,
+            startAngle: startDeg * Math.PI / 180,
+            endAngle: endDeg * Math.PI / 180
+          });
+          sectorGroup.append("path").attr("class", "gtv-wheel-scene-sector").attr("d", arcPath).attr("fill", shadeSurface(getGenreNodeColor(index, rootId), UNDERGROUND_DARKEN_RATIO)).attr("fill-opacity", UNDERGROUND_SECTOR_FILL_OPACITY);
+        });
         const branchGroup = sectorGroup.append("g").attr("class", "gtv-wheel-core-branch").attr("data-gtv-branch-index", branchIndex);
         renderPopSubtree(
           d34,
@@ -4527,7 +4636,11 @@ function WheelRadialPopCoreCore({
             isCoreSector: true,
             rootLinkOrigin,
             selectedNodeId: panel?.node.id ?? null,
-            nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
+            dotRadiusMemory: dotRadiusMemoryRef.current,
+            nodeFillOf: (node) => {
+              const fill = getGenreNodeStyle(index, node.id).fill;
+              return undergroundIds.has(node.id) ? shadeSurface(fill, UNDERGROUND_DARKEN_RATIO) : fill;
+            }
           }
         );
       });
@@ -4582,6 +4695,7 @@ function WheelRadialPopCoreCore({
           skipRootNode: true,
           isMainstreamSector: isCenterMainstream,
           selectedNodeId: panel?.node.id ?? null,
+          dotRadiusMemory: dotRadiusMemoryRef.current,
           nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
         }
       );
@@ -4617,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,
@@ -4776,11 +4890,12 @@ function WheelRadialPopCoreCore({
         )
       };
     });
-  }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  }, [groups, continuousAngleByRootId, sectorSpanByRootId, index]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         "gtv-wheel-container--radial",
@@ -4795,7 +4910,7 @@ function WheelRadialPopCoreCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             ref: stageRef,
@@ -4809,9 +4924,9 @@ function WheelRadialPopCoreCore({
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-wheel-stage", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-                isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-wheel-stage", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+                isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "div",
                   {
                     className: "gtv-wheel-middle-circle",
@@ -4820,8 +4935,8 @@ function WheelRadialPopCoreCore({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-wheel", children: [
-                  sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-wheel", children: [
+                  sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-sector",
@@ -4833,8 +4948,8 @@ function WheelRadialPopCoreCore({
                     },
                     `sector-${sector.rootId}`
                   )),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-inner-tint" }),
-                  isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-inner-tint" }),
+                  isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-middle-tint",
@@ -4844,7 +4959,7 @@ function WheelRadialPopCoreCore({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "svg",
                   {
                     ref: popSvgRef,
@@ -4853,7 +4968,7 @@ function WheelRadialPopCoreCore({
                     height: svgCanvasRadius * 2
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-center-node", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-center-node", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     ref: centerChipRef,
@@ -4885,14 +5000,14 @@ 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
                   }
                 ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-wheel", children: [
-                  dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-wheel", children: [
+                  dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-divider",
@@ -4911,12 +5026,12 @@ function WheelRadialPopCoreCore({
                       group.root.id
                     );
                     const diameter = 2 * calculateNodeDotRadius(rootItemCount, wheelItemCountRange);
-                    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "div",
                       {
                         className: "gtv-wheel-slot",
                         style: { "--gtv-chip-angle": `${angle}deg` },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                           "button",
                           {
                             type: "button",
@@ -4947,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))
                           }
                         ) })
                       },
@@ -4958,7 +5073,7 @@ function WheelRadialPopCoreCore({
                   })
                 ] })
               ] }),
-              regionLabel && index.byId.has(regionLabel.rootId) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              regionLabel && index.byId.has(regionLabel.rootId) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   ref: regionLabelRef,
@@ -4976,7 +5091,7 @@ function WheelRadialPopCoreCore({
             ]
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -5003,10 +5118,6 @@ function WheelRadialPopCoreCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -5026,8 +5137,8 @@ function WheelRadialPopCoreCore({
             onZoomIn: onFocusChange && panel.node.id !== focusNodeId && isZoomableNode(nodes, panel.node.id) ? () => onFocusChange(panel.node.id, "zoom-in") : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OverlayPanel, { ...overlayPanel }),
-        onFocusChange && focusNodeId !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OverlayPanel, { ...overlayPanel }),
+        onFocusChange && focusNodeId !== null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           WheelBreadcrumb,
           {
             ancestors: index.ancestorsOf(focusNodeId).filter((ancestor) => isZoomableNode(nodes, ancestor.id)),
@@ -5043,56 +5154,18 @@ function WheelRadialPopCoreCore({
           },
           focusNodeId
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(import_md10.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(import_md10.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([
-                    wheelCircleRef.current,
-                    ...queryTreeContentElements(popSvgRef.current)
-                  ]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_md10.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            zoomControls: showZoomControls,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([
+              wheelCircleRef.current,
+              ...queryTreeContentElements(popSvgRef.current)
+            ])
           }
         )
       ]
@@ -5101,14 +5174,14 @@ function WheelRadialPopCoreCore({
 }
 
 // src/GenreTreeWheelRadialPopCore.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function GenreTreeWheelRadialPopCore(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WheelRadialPopCoreCore, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(WheelRadialPopCoreCore, { ...props });
 }
 
 // src/GenreTreeOutline.tsx
 var import_react14 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function createOutlineStore(initial) {
   let state = initial;
   const listeners = /* @__PURE__ */ new Set();
@@ -5182,9 +5255,9 @@ function OutlineNodeView({
   const { itemCount } = node;
   const children = model.index.childrenByParentId.get(nodeId) ?? [];
   const split = isRoot ? model.ringSplitById.get(nodeId) : void 0;
-  const row = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: ["gtv-outline-row", isSelected && "gtv-outline-row--selected"].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gtv-outline-dot", style: { background: model.styleOf(node).fill } }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const row = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: ["gtv-outline-row", isSelected && "gtv-outline-row--selected"].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-outline-dot", style: { background: model.styleOf(node).fill } }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
@@ -5201,16 +5274,16 @@ function OutlineNodeView({
         children: node.name
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gtv-outline-count", children: itemCount })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-outline-count", children: itemCount })
   ] });
   const itemProps = { model, store, callbacks };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: "gtv-outline-item", "data-gtv-node-id": nodeId, children: children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { open: isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(nodeId)), children: row }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list", children: split ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineSection, { rootId: nodeId, kind: "core", branches: split.coreBranches, ...itemProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineSection, { rootId: nodeId, kind: "pop", branches: split.popBranches, ...itemProps })
-    ] }) : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, ...itemProps }, child.id)) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-outline-leaf", children: row }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: "gtv-outline-item", "data-gtv-node-id": nodeId, children: children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("details", { open: isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(nodeId)), children: row }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list", children: split ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineSection, { rootId: nodeId, kind: "core", branches: split.coreBranches, ...itemProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineSection, { rootId: nodeId, kind: "pop", branches: split.popBranches, ...itemProps })
+    ] }) : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, ...itemProps }, child.id)) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "gtv-outline-leaf", children: row }) });
 }
 var OutlineNode = (0, import_react14.memo)(OutlineNodeView);
 var OutlineSection = (0, import_react14.memo)(function OutlineSection2({
@@ -5224,9 +5297,9 @@ var OutlineSection = (0, import_react14.memo)(function OutlineSection2({
   const key = sectionKey(kind, rootId);
   const isOpen = useOutlineState(store, (s) => s.openIds.has(key));
   if (branches.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: "gtv-outline-item", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { open: isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(key)), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gtv-outline-section-label", children: kind === "core" ? "Core" : "Pop" }) }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list", children: branches.map(({ child }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, model, store, callbacks }, child.id)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: "gtv-outline-item", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("details", { open: isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(key)), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-outline-section-label", children: kind === "core" ? "Core" : "Pop" }) }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list", children: branches.map(({ child }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, model, store, callbacks }, child.id)) })
   ] }) });
 });
 function GenreTreeOutline(props) {
@@ -5243,10 +5316,6 @@ function GenreTreeOutline(props) {
     hideInfoPanelTitle = false,
     itemCountLabel,
     readOnly,
-    editMode,
-    onEditModeChange,
-    renderTitleEditor,
-    renderParentsEditor,
     renderDangerZone,
     expanded,
     onExpandedChange,
@@ -5347,12 +5416,12 @@ function GenreTreeOutline(props) {
   }, [selectedNodeId, store]);
   const selectedNode = selectedId === null ? void 0 : index.byId.get(selectedId);
   const itemProps = { model, store, callbacks };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: ["gtv-outline", selectedNode && "gtv-outline--panel-open", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-outline-scroll", ref: scrollRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots", children: [model.centerRoot, ...model.ringRoots].map((root) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) }),
-      model.detachedRoots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots gtv-outline-list--detached", children: model.detachedRoots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: ["gtv-outline", selectedNode && "gtv-outline--panel-open", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gtv-outline-scroll", ref: scrollRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots", children: [model.centerRoot, ...model.ringRoots].map((root) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) }),
+      model.detachedRoots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots gtv-outline-list--detached", children: model.detachedRoots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) })
     ] }),
-    selectedNode && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    selectedNode && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       InfoPanel,
       {
         node: selectedNode,
@@ -5373,10 +5442,6 @@ function GenreTreeOutline(props) {
         hideTitle: hideInfoPanelTitle,
         itemCountLabel,
         readOnly,
-        editMode,
-        onEditModeChange,
-        renderTitleEditor,
-        renderParentsEditor,
         renderDangerZone,
         expanded,
         onExpandedChange,
@@ -5395,13 +5460,13 @@ function GenreTreeOutline(props) {
         } : void 0
       }
     ),
-    overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OverlayPanel, { ...overlayPanel })
+    overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OverlayPanel, { ...overlayPanel })
   ] });
 }
 
 // src/GenreTreeSkeleton.tsx
 var import_react15 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var CARD_FILL = "#F4F4F5";
 var CARD_BORDER_COLOR = "#E4E4E7";
 var CONNECTOR_COLOR2 = "#D4D4D8";
@@ -5506,8 +5571,8 @@ function SkeletonCard({
   card,
   rootAccent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "rect",
       {
         x: card.x,
@@ -5521,7 +5586,7 @@ function SkeletonCard({
         strokeWidth: rootAccent ? 1.5 : 1
       }
     ),
-    rootAccent && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    rootAccent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "circle",
       {
         cx: card.x + 18,
@@ -5539,9 +5604,9 @@ function GenreTreeSkeleton() {
   const animationName = `genre-tree-skeleton-sweep-${uid}`;
   const shimmerBandClass = `genre-tree-skeleton-shimmer-band-${uid}`;
   const sweepDistance = VIEWBOX_WIDTH + SHIMMER_BAND_WIDTH;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "gtv-skeleton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "gtv-skeleton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "svg",
       {
         viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
@@ -5550,7 +5615,7 @@ function GenreTreeSkeleton() {
         className: "gtv-skeleton-svg",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: `
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { children: `
           @keyframes ${animationName} {
             from { transform: translateX(0); }
             to { transform: translateX(${sweepDistance}px); }
@@ -5564,9 +5629,9 @@ function GenreTreeSkeleton() {
             }
           }
         ` }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "0%",
@@ -5574,7 +5639,7 @@ function GenreTreeSkeleton() {
                   stopOpacity: 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "50%",
@@ -5582,7 +5647,7 @@ function GenreTreeSkeleton() {
                   stopOpacity: 0.9
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -5591,8 +5656,8 @@ function GenreTreeSkeleton() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("mask", { id: maskId, children: [
-              ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mask", { id: maskId, children: [
+              ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "path",
                 {
                   d: connectorPath(link.from, link.to),
@@ -5602,7 +5667,7 @@ function GenreTreeSkeleton() {
                 },
                 `link-mask-${i}`
               )),
-              ALL_CARDS.map(({ card }, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              ALL_CARDS.map(({ card }, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "rect",
                 {
                   x: card.x,
@@ -5617,7 +5682,7 @@ function GenreTreeSkeleton() {
               ))
             ] })
           ] }),
-          ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "path",
             {
               d: connectorPath(link.from, link.to),
@@ -5627,8 +5692,8 @@ function GenreTreeSkeleton() {
             },
             `link-${i}`
           )),
-          ALL_CARDS.map(({ card, rootAccent }, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SkeletonCard, { card, rootAccent }, `card-${i}`)),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ALL_CARDS.map(({ card, rootAccent }, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SkeletonCard, { card, rootAccent }, `card-${i}`)),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "rect",
             {
               className: shimmerBandClass,
@@ -5647,7 +5712,7 @@ function GenreTreeSkeleton() {
 
 // src/GenreTreeWheelSkeleton.tsx
 var import_react16 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SHAPE_COLOR = "#D4D4D8";
 var SECTOR_FILL_OPACITY = 0.22;
 var INNER_TINT_OPACITY = 0.55;
@@ -5792,8 +5857,8 @@ function GenreTreeWheelSkeleton() {
     sharedStartTime ??= animation.startTime ?? document.timeline.currentTime;
     animation.startTime = sharedStartTime;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gtv-wheel-skeleton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "gtv-wheel-skeleton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: "gtv-wheel-skeleton-sector-layer",
@@ -5801,8 +5866,8 @@ function GenreTreeWheelSkeleton() {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "svg",
       {
         viewBox: `${CANVAS_ORIGIN} ${CANVAS_ORIGIN} ${CANVAS_SIZE} ${CANVAS_SIZE}`,
@@ -5810,14 +5875,14 @@ function GenreTreeWheelSkeleton() {
         className: "gtv-wheel-skeleton-svg",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("radialGradient", { id: mainstreamId, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("stop", { offset: "0%", stopColor: "#FFFFFF", stopOpacity: 0.45 }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("stop", { offset: "65%", stopColor: "#FFFFFF", stopOpacity: 0.15 }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: 0 })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("radialGradient", { id: mainstreamId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: "0%", stopColor: "#FFFFFF", stopOpacity: 0.45 }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: "65%", stopColor: "#FFFFFF", stopOpacity: 0.15 }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: 0 })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { id: shapesId, children: [
-              LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { id: shapesId, children: [
+              LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "path",
                 {
                   d: link.d,
@@ -5829,21 +5894,21 @@ function GenreTreeWheelSkeleton() {
                 },
                 `link-${i}`
               )),
-              DOTS.map((dot, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: dot.point.x, cy: dot.point.y, r: dot.r, fill: "currentColor" }, `dot-${i}`))
+              DOTS.map((dot, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: dot.point.x, cy: dot.point.y, r: dot.r, fill: "currentColor" }, `dot-${i}`))
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: 0, cy: 0, r: RING_RADIUS, fill: "#FFFFFF", fillOpacity: INNER_TINT_OPACITY }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: 0, cy: 0, r: MAINSTREAM_RADIUS, fill: `url(#${mainstreamId})` }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("use", { href: `#${shapesId}`, color: SHAPE_COLOR })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: 0, cy: 0, r: RING_RADIUS, fill: "#FFFFFF", fillOpacity: INNER_TINT_OPACITY }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: 0, cy: 0, r: MAINSTREAM_RADIUS, fill: `url(#${mainstreamId})` }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("use", { href: `#${shapesId}`, color: SHAPE_COLOR })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "gtv-wheel-skeleton-shimmer", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: wedgeRef, className: "gtv-wheel-skeleton-shimmer-wedge" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "gtv-wheel-skeleton-shimmer", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: wedgeRef, className: "gtv-wheel-skeleton-shimmer-wedge" }) })
   ] });
 }
 
 // src/GenreTreeOutlineSkeleton.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ROWS = [
   { depth: 0, width: 38 },
   { depth: 0, width: 26 },
@@ -5855,9 +5920,9 @@ var ROWS = [
   { depth: 0, width: 22 }
 ];
 function GenreTreeOutlineSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "gtv-skeleton gtv-outline-skeleton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    ROWS.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "gtv-skeleton gtv-outline-skeleton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    ROWS.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: "gtv-outline-skeleton-row",
@@ -5870,13 +5935,13 @@ function GenreTreeOutlineSkeleton() {
 }
 
 // src/GenreTreeViewSkeleton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function GenreTreeViewSkeleton({ viewMode }) {
   if (viewMode === "wheel" || viewMode === "pop-core") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "gtv-view-skeleton-wheel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GenreTreeWheelSkeleton, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "gtv-view-skeleton-wheel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenreTreeWheelSkeleton, {}) });
   }
-  if (viewMode === "outline") return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GenreTreeOutlineSkeleton, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GenreTreeSkeleton, {});
+  if (viewMode === "outline") return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenreTreeOutlineSkeleton, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenreTreeSkeleton, {});
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {