npm - @behindthemusictree/genre-tree-view - Versions diffs - 5.0.0 → 6.2.0 - Mend

@behindthemusictree/genre-tree-view 5.0.0 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 // src/GenreTree.tsx
 import { useEffect as useEffect5, useRef as useRef5, useMemo as useMemo2 } from "react";
 import * as d3 from "d3";
-import { MdFitScreen, MdZoomIn as MdZoomIn2, MdZoomOut } from "react-icons/md";
 // src/NodeHelper.tsx
 import ReactDOMServer from "react-dom/server";
@@ -25,6 +24,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",
@@ -106,6 +108,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 };
@@ -194,10 +201,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 = 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;
@@ -584,6 +594,61 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
   return svg;
 }
+// src/FloatingControls.tsx
+import { MdFitScreen, MdZoomIn, MdZoomOut } from "react-icons/md";
+// src/BusyIndicator.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function BusyIndicator() {
+  return /* @__PURE__ */ jsxs2("div", { className: "gtv-busy", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx2("span", { className: "gtv-busy-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx2("span", { className: "gtv-skeleton-sr-only", children: "Updating genre tree\u2026" })
+  ] });
+}
+// src/FloatingControls.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: [
+        "gtv-wheel-floating-controls",
+        orientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
+      ].filter(Boolean).join(" "),
+      children: [
+        busy && /* @__PURE__ */ jsx3(BusyIndicator, {}),
+        leading && /* @__PURE__ */ jsx3("div", { className: "gtv-floating-controls-leading", children: leading }),
+        /* @__PURE__ */ jsxs3("div", { className: "gtv-zoom-controls", children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: ["gtv-zoom-btn", !panZoom.canZoomIn && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
+              disabled: !panZoom.canZoomIn,
+              onClick: panZoom.zoomIn,
+              "aria-label": "Zoom in",
+              children: /* @__PURE__ */ jsx3(MdZoomIn, { className: "gtv-icon", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: ["gtv-zoom-btn", !panZoom.canZoomOut && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
+              disabled: !panZoom.canZoomOut,
+              onClick: panZoom.zoomOut,
+              "aria-label": "Zoom out",
+              children: /* @__PURE__ */ jsx3(MdZoomOut, { className: "gtv-icon", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "gtv-zoom-btn", onClick: onFit, "aria-label": "Fit to frame", children: /* @__PURE__ */ jsx3(MdFitScreen, { className: "gtv-icon", size: 18 }) })
+        ] })
+      ]
+    }
+  );
+}
 // src/use-pan-zoom.ts
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -1220,13 +1285,13 @@ function useTreeIndex(nodes) {
 // src/InfoPanel.tsx
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { MdArrowBack, MdClose, MdZoomIn } from "react-icons/md";
+import { MdArrowBack, MdClose, MdZoomIn as MdZoomIn2 } from "react-icons/md";
 // src/InfoPanelExpandButton.tsx
 import { MdCloseFullscreen, MdOpenInFull } from "react-icons/md";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -1234,7 +1299,7 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
       style,
       onClick: () => onExpandedChange(!expanded),
       "aria-label": expanded ? "Collapse panel" : "Expand panel",
-      children: expanded ? /* @__PURE__ */ jsx2(MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ jsx2(MdOpenInFull, { className: "gtv-icon", size: 16 })
+      children: expanded ? /* @__PURE__ */ jsx4(MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ jsx4(MdOpenInFull, { className: "gtv-icon", size: 16 })
     }
   );
 }
@@ -1242,11 +1307,11 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
 // src/InfoPanelSection.tsx
 import { useState as useState3 } from "react";
 import { MdExpandMore } from "react-icons/md";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function InfoPanelSection({ title, children }) {
   const [open, setOpen] = useState3(true);
-  return /* @__PURE__ */ jsxs2("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-children", children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -1254,8 +1319,8 @@ function InfoPanelSection({ title, children }) {
         "aria-expanded": open,
         onClick: () => setOpen((isOpen) => !isOpen),
         children: [
-          /* @__PURE__ */ jsx3("span", { className: "gtv-info-panel-children-title", children: title }),
-          /* @__PURE__ */ jsx3(MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
+          /* @__PURE__ */ jsx5("span", { className: "gtv-info-panel-children-title", children: title }),
+          /* @__PURE__ */ jsx5(MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
         ]
       }
     ),
@@ -1268,7 +1333,7 @@ import { useState as useState4 } from "react";
 import { MdMoreVert, MdModeEdit } from "react-icons/md";
 import { FaPlus, FaTrashAlt, FaPlay, FaPause, FaSpinner } from "react-icons/fa";
 import { PiGraphFill as PiGraphFill2 } from "react-icons/pi";
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function NodeToolbar({
   node,
   playingNodeId,
@@ -1289,9 +1354,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__ */ jsx4(FaPause, { className: "gtv-icon", size: "0.6em" }) : isThisPlaying && playState === "loading" ? /* @__PURE__ */ jsx4(FaSpinner, { className: "gtv-icon gtv-icon--spin", size: "0.6em" }) : /* @__PURE__ */ jsx4(FaPlay, { className: "gtv-icon", size: "0.6em" });
-  return /* @__PURE__ */ jsxs3("div", { className: ["gtv-toolbar", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx4(
+  const playIcon = isThisPlaying && playState === "playing" ? /* @__PURE__ */ jsx6(FaPause, { className: "gtv-icon", size: "0.6em" }) : isThisPlaying && playState === "loading" ? /* @__PURE__ */ jsx6(FaSpinner, { className: "gtv-icon gtv-icon--spin", size: "0.6em" }) : /* @__PURE__ */ jsx6(FaPlay, { className: "gtv-icon", size: "0.6em" });
+  return /* @__PURE__ */ jsxs5("div", { className: ["gtv-toolbar", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -1303,8 +1368,8 @@ function NodeToolbar({
         children: playIcon
       }
     ),
-    isActionable && /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsx4(
+    isActionable && /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1312,13 +1377,13 @@ function NodeToolbar({
           title: "Add sub-genre",
           "aria-label": "Add sub-genre",
           onClick: () => onAddChild?.(node.id),
-          children: /* @__PURE__ */ jsx4(FaPlus, { className: "gtv-icon", size: "0.6em" })
+          children: /* @__PURE__ */ jsx6(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__ */ jsx4(
+        return /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1332,8 +1397,8 @@ function NodeToolbar({
           action.key
         );
       }),
-      /* @__PURE__ */ jsxs3("div", { className: "gtv-toolbar-overflow", children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs5("div", { className: "gtv-toolbar-overflow", children: [
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1343,11 +1408,11 @@ function NodeToolbar({
             "aria-haspopup": "menu",
             "aria-expanded": menuOpen,
             onClick: () => setMenuOpen((open) => !open),
-            children: /* @__PURE__ */ jsx4(MdMoreVert, { size: "0.6em" })
+            children: /* @__PURE__ */ jsx6(MdMoreVert, { size: "0.6em" })
           }
         ),
-        menuOpen && /* @__PURE__ */ jsxs3("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
-          /* @__PURE__ */ jsxs3(
+        menuOpen && /* @__PURE__ */ jsxs5("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -1357,12 +1422,12 @@ function NodeToolbar({
                 onRenameRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ jsx4(MdModeEdit, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-label", children: "Rename" })
+                /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ jsx6(MdModeEdit, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-label", children: "Rename" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -1372,14 +1437,14 @@ function NodeToolbar({
                 onReparentRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ jsx4(PiGraphFill2, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-label", children: "Change parent" })
+                /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ jsx6(PiGraphFill2, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-label", children: "Change parent" })
               ]
             }
           ),
           overflowExtraActions.map((action) => {
             const enabled = action.enabled ? action.enabled(node) : true;
-            return /* @__PURE__ */ jsxs3(
+            return /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
@@ -1390,15 +1455,15 @@ function NodeToolbar({
                   action.onClick(event, node);
                 },
                 children: [
-                  /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-icon", children: action.icon(node) }),
-                  /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-label", children: action.label(node) })
+                  /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-icon", children: action.icon(node) }),
+                  /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-label", children: action.label(node) })
                 ]
               },
               action.key
             );
           }),
-          /* @__PURE__ */ jsx4("div", { className: "gtv-menu-divider" }),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx6("div", { className: "gtv-menu-divider" }),
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -1408,8 +1473,8 @@ function NodeToolbar({
                 onDeleteRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ jsx4(FaTrashAlt, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ jsx4("span", { className: "gtv-menu-row-label", children: "Delete" })
+                /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ jsx6(FaTrashAlt, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ jsx6("span", { className: "gtv-menu-row-label", children: "Delete" })
               ]
             }
           )
@@ -1420,7 +1485,7 @@ function NodeToolbar({
 }
 // src/InfoPanel.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var MINI_NODE_MIN_DIAMETER = 14;
 var MINI_NODE_MAX_DIAMETER = 32;
 var MINI_NODE_MIN_FONT_SIZE = 10;
@@ -1452,10 +1517,6 @@ function InfoPanel({
   onZoomIn,
   actions,
   readOnly = false,
-  editMode = false,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded = false,
   onExpandedChange,
@@ -1466,10 +1527,8 @@ function InfoPanel({
   useEffect3(() => {
     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)
   ]);
@@ -1483,9 +1542,9 @@ function InfoPanel({
   };
   const miniNodeContent = (target, background, range) => {
     const { diameter, fontSize } = miniNodeSize(target, range);
-    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx5("span", { className: "gtv-info-panel-mini-dot", style: { background, width: diameter, height: diameter } }),
-      /* @__PURE__ */ jsx5("span", { className: "gtv-info-panel-mini-label", style: { fontSize }, children: target.name })
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx7("span", { className: "gtv-info-panel-mini-dot", style: { background, width: diameter, height: diameter } }),
+      /* @__PURE__ */ jsx7("span", { className: "gtv-info-panel-mini-label", style: { fontSize }, children: target.name })
     ] });
   };
   const sortedChildNodes = [...childNodes].sort((a, b) => b.node.itemCount - a.node.itemCount);
@@ -1498,9 +1557,9 @@ function InfoPanel({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [expanded, onExpandedChange]);
-  const dangerZone = editing && renderDangerZone && /* @__PURE__ */ jsx5("div", { className: "gtv-info-panel-danger-zone", children: renderDangerZone(node) });
-  const toolbar = actions ? /* @__PURE__ */ jsx5(NodeToolbar, { node, className: "gtv-info-panel-toolbar", ...actions }, node.id) : null;
-  const ancestors = ancestorNodes.length > 0 ? /* @__PURE__ */ jsx5(InfoPanelSection, { title: "Ancestors", children: /* @__PURE__ */ jsx5("ul", { className: "gtv-info-panel-children-list gtv-info-panel-ancestors-list", children: ancestorNodes.map(({ node: ancestor, fill: fill2 }) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
+  const dangerZone = !readOnly && renderDangerZone && /* @__PURE__ */ jsx7("div", { className: "gtv-info-panel-danger-zone", children: renderDangerZone(node) });
+  const toolbar = actions ? /* @__PURE__ */ jsx7(NodeToolbar, { node, className: "gtv-info-panel-toolbar", ...actions }, node.id) : null;
+  const ancestors = ancestorNodes.length > 0 ? /* @__PURE__ */ jsx7(InfoPanelSection, { title: "Ancestors", children: /* @__PURE__ */ jsx7("ul", { className: "gtv-info-panel-children-list gtv-info-panel-ancestors-list", children: ancestorNodes.map(({ node: ancestor, fill: fill2 }) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
     "button",
     {
       type: "button",
@@ -1510,76 +1569,73 @@ function InfoPanel({
       children: miniNodeContent(ancestor, fill2, ancestorRange)
     }
   ) }, ancestor.id)) }) }) : null;
-  const family = /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    editing && renderParentsEditor && renderParentsEditor(node),
-    /* @__PURE__ */ jsx5(InfoPanelSection, { title: "Family", children: /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-mini-tree", children: [
-      shownParent && /* @__PURE__ */ jsx5("div", { className: "gtv-info-panel-mini-tree-parent", children: /* @__PURE__ */ jsx5(
+  const family = /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsx7(InfoPanelSection, { title: "Family", children: /* @__PURE__ */ jsxs6("div", { className: "gtv-info-panel-mini-tree", children: [
+    parentNode && /* @__PURE__ */ jsx7("div", { className: "gtv-info-panel-mini-tree-parent", children: /* @__PURE__ */ jsx7(
+      "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__ */ jsx7(
+      "div",
+      {
+        className: `gtv-info-panel-mini-tree-node${childNodes.length === 0 ? " gtv-info-panel-mini-tree-node--leaf" : ""}`,
+        children: /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: "gtv-info-panel-child gtv-info-panel-mini-tree-current",
+            title: node.name,
+            children: miniNodeContent(node, fill, miniTreeRange)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "gtv-info-panel-mini-tree-children", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "gtv-info-panel-children-title", children: [
+        childNodes.length,
+        " ",
+        childNodes.length <= 1 ? "child" : "children"
+      ] }),
+      childNodes.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "gtv-info-panel-children-list", children: sortedChildNodes.map(({ node: child, fill: fill2 }) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
         "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__ */ jsx5(
-        "div",
-        {
-          className: `gtv-info-panel-mini-tree-node${childNodes.length === 0 ? " gtv-info-panel-mini-tree-node--leaf" : ""}`,
-          children: /* @__PURE__ */ jsx5(
-            "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__ */ jsxs4("div", { className: "gtv-info-panel-mini-tree-children", children: [
-        /* @__PURE__ */ jsxs4("span", { className: "gtv-info-panel-children-title", children: [
-          childNodes.length,
-          " ",
-          childNodes.length <= 1 ? "child" : "children"
-        ] }),
-        childNodes.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "gtv-info-panel-children-list", children: sortedChildNodes.map(({ node: child, fill: fill2 }) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
-          "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__ */ jsxs4("dl", { className: "gtv-info-panel-fields", children: [
-    /* @__PURE__ */ jsx5("dt", { children: itemCountLabel }),
-    /* @__PURE__ */ jsx5("dd", { children: node.itemCount })
+      ) }, child.id)) })
+    ] })
+  ] }) }) });
+  const itemCount = /* @__PURE__ */ jsxs6("dl", { className: "gtv-info-panel-fields", children: [
+    /* @__PURE__ */ jsx7("dt", { children: itemCountLabel }),
+    /* @__PURE__ */ jsx7("dd", { children: node.itemCount })
   ] });
-  const { primary, aside } = renderInfoPanelBody ? renderInfoPanelBody(node, { toolbar, ancestors, family, itemCount }) : { primary: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+  const { primary, aside } = renderInfoPanelBody ? renderInfoPanelBody(node, { toolbar, ancestors, family, itemCount }) : { primary: /* @__PURE__ */ jsxs6(Fragment2, { children: [
     toolbar,
     ancestors,
     family,
     itemCount
   ] }) };
   const hasAside = aside !== void 0 && aside !== null && aside !== false;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `gtv-info-panel gtv-info-panel--${side}${expanded ? " gtv-info-panel--expanded" : ""}${expanded && !hasAside ? " gtv-info-panel--expanded-solo" : ""}${collapsed ? " gtv-info-panel--collapsed" : ""}`,
       ref: panelRef,
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "gtv-info-panel-header",
             style: { background: fill, color: textColor },
             children: [
-              onPrevious && /* @__PURE__ */ jsx5(
+              onPrevious && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -1588,21 +1644,21 @@ function InfoPanel({
                   onClick: onPrevious,
                   "aria-label": previousLabel ? `Previous: ${previousLabel}` : "Previous",
                   title: previousLabel,
-                  children: /* @__PURE__ */ jsx5(MdArrowBack, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ jsx7(MdArrowBack, { className: "gtv-icon", size: 16 })
                 }
               ),
-              editing && renderTitleEditor ? /* @__PURE__ */ jsx5("div", { className: "gtv-info-panel-title gtv-info-panel-title--editor", children: renderTitleEditor(node) }) : /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs6(
                 "span",
                 {
                   className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`,
                   style: { color: textColor },
                   children: [
                     node.name,
-                    node.umbrella && /* @__PURE__ */ jsx5("span", { className: "gtv-info-panel-umbrella-badge", children: "umbrella" })
+                    node.umbrella && /* @__PURE__ */ jsx7("span", { className: "gtv-info-panel-umbrella-badge", children: "umbrella" })
                   ]
                 }
               ),
-              onZoomIn && /* @__PURE__ */ jsx5(
+              onZoomIn && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -1611,22 +1667,11 @@ function InfoPanel({
                   onClick: onZoomIn,
                   "aria-label": "Zoom in",
                   title: "Zoom in",
-                  children: /* @__PURE__ */ jsx5(MdZoomIn, { className: "gtv-icon", size: 16 })
-                }
-              ),
-              onEditModeChange && !readOnly && /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-info-panel-edit",
-                  style: { color: textColor },
-                  onClick: () => onEditModeChange(!editMode),
-                  "aria-pressed": editMode,
-                  children: editMode ? "Done" : "Edit"
+                  children: /* @__PURE__ */ jsx7(MdZoomIn2, { className: "gtv-icon", size: 16 })
                 }
               ),
-              onExpandedChange && !hideExpandButton && /* @__PURE__ */ jsx5(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
-              !hideClose && /* @__PURE__ */ jsx5(
+              onExpandedChange && !hideExpandButton && /* @__PURE__ */ jsx7(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
+              !hideClose && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -1634,18 +1679,18 @@ function InfoPanel({
                   style: { color: textColor },
                   onClick: onClose,
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx5(MdClose, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ jsx7(MdClose, { className: "gtv-icon", size: 16 })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-body", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-primary", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "gtv-info-panel-body", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "gtv-info-panel-primary", children: [
             primary,
             expanded && !hasAside && dangerZone
           ] }),
-          hasAside && /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-aside", children: [
+          hasAside && /* @__PURE__ */ jsxs6("div", { className: "gtv-info-panel-aside", children: [
             aside,
             expanded && dangerZone
           ] })
@@ -1659,7 +1704,7 @@ function InfoPanel({
 // src/OverlayPanel.tsx
 import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import { MdClose as MdClose2 } from "react-icons/md";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function OverlayPanel({
   title,
   content,
@@ -1694,21 +1739,21 @@ function OverlayPanel({
     expanded && !extraContent && "gtv-info-panel--expanded-solo",
     collapsed && "gtv-info-panel--collapsed"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs5("div", { className, ref: panelRef, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "gtv-info-panel-header", children: [
-      /* @__PURE__ */ jsx6("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
-      onExpandedChange && !hideExpandButton && /* @__PURE__ */ jsx6(InfoPanelExpandButton, { expanded, onExpandedChange }),
-      !hideClose && /* @__PURE__ */ jsx6("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx6(MdClose2, { className: "gtv-icon", size: 16 }) })
+  return /* @__PURE__ */ jsxs7("div", { className, ref: panelRef, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "gtv-info-panel-header", children: [
+      /* @__PURE__ */ jsx8("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
+      onExpandedChange && !hideExpandButton && /* @__PURE__ */ jsx8(InfoPanelExpandButton, { expanded, onExpandedChange }),
+      !hideClose && /* @__PURE__ */ jsx8("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx8(MdClose2, { className: "gtv-icon", size: 16 }) })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "gtv-info-panel-body", children: [
-      /* @__PURE__ */ jsx6("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
-      extraContent && /* @__PURE__ */ jsx6("div", { className: "gtv-info-panel-primary gtv-overlay-content", children: extraContent })
+    /* @__PURE__ */ jsxs7("div", { className: "gtv-info-panel-body", children: [
+      /* @__PURE__ */ jsx8("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
+      extraContent && /* @__PURE__ */ jsx8("div", { className: "gtv-info-panel-primary gtv-overlay-content", children: extraContent })
     ] })
   ] });
 }
 // src/GenreTree.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function GenreTree({
   nodes,
   className,
@@ -1736,10 +1781,6 @@ function GenreTree({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -1749,7 +1790,9 @@ function GenreTree({
   wheelZoom,
   defaultViewport,
   onViewportChange,
-  controlsOrientation = "vertical"
+  controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy
 }) {
   const index = useTreeIndex(nodes);
   const svgRef = useRef5(null);
@@ -1905,7 +1948,7 @@ function GenreTree({
     hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
-  const svg = /* @__PURE__ */ jsx7(
+  const svg = /* @__PURE__ */ jsx9(
     "svg",
     {
       ref: svgRef,
@@ -1915,13 +1958,14 @@ function GenreTree({
     }
   );
   if (!interactive) {
-    return /* @__PURE__ */ jsx7("div", { className, children: svg });
+    return /* @__PURE__ */ jsx9("div", { className, children: svg });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       ref: viewportRef,
       className,
+      "aria-busy": busy,
       style: {
         position: "relative",
         overflow: "hidden",
@@ -1944,7 +1988,7 @@ function GenreTree({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             ref: stageRef,
@@ -1958,7 +2002,7 @@ function GenreTree({
             children: svg
           }
         ),
-        panel && /* @__PURE__ */ jsx7(
+        panel && /* @__PURE__ */ jsx9(
           InfoPanel,
           {
             node: panel.node,
@@ -2008,10 +2052,6 @@ function GenreTree({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -2030,54 +2070,15 @@ function GenreTree({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ jsx7(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ jsx7(
-          "div",
+        overlayPanel && /* @__PURE__ */ jsx9(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ jsx9(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ jsxs6("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ jsx7(
-                "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__ */ jsx7(MdZoomIn2, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                "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__ */ jsx7(MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current)),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ jsx7(MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
           }
         )
       ]
@@ -2087,7 +2088,6 @@ function GenreTree({
 // src/GenreTreeWheelBase.tsx
 import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState5 } from "react";
-import { MdFitScreen as MdFitScreen2, MdZoomIn as MdZoomIn3, MdZoomOut as MdZoomOut2 } from "react-icons/md";
 import * as d32 from "d3";
 // src/root-grouping.ts
@@ -2163,7 +2163,7 @@ function computeRotationForSelection(currentRotationDeg, targetAngle, landingAng
 }
 // src/GenreTreeWheelBase.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function WheelCore({
   nodes,
   className,
@@ -2189,10 +2189,6 @@ function WheelCore({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -2203,6 +2199,8 @@ function WheelCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy,
   selectedNodeId
 }) {
   const treeOrientation = direction === "left" ? "horizontal-anchored" : "vertical";
@@ -2318,10 +2316,11 @@ function WheelCore({
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, effectiveRootId, nodes, panel, showNodeInfo]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         direction === "left" && "gtv-wheel-container--left",
@@ -2336,7 +2335,7 @@ function WheelCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             ref: stageRef,
@@ -2349,7 +2348,7 @@ function WheelCore({
               transform: panZoom.transform,
               transformOrigin: "0 0"
             },
-            children: /* @__PURE__ */ jsxs7(
+            children: /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: "gtv-wheel-stage",
@@ -2357,7 +2356,7 @@ function WheelCore({
                   [chipHalfExtentVar]: `${rootChipHalfExtent}px`
                 },
                 children: [
-                  selectedGroup && /* @__PURE__ */ jsx8("div", { className: "gtv-wheel-tree-anchor", ref: treeAnchorRef, children: /* @__PURE__ */ jsx8(
+                  selectedGroup && /* @__PURE__ */ jsx10("div", { className: "gtv-wheel-tree-anchor", ref: treeAnchorRef, children: /* @__PURE__ */ jsx10(
                     GenreTree,
                     {
                       nodes: selectedGroup.nodes,
@@ -2395,9 +2394,9 @@ function WheelCore({
                     },
                     selectedGroup.root.id
                   ) }),
-                  /* @__PURE__ */ jsx8("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-                  centerLabel && /* @__PURE__ */ jsx8("div", { className: "gtv-wheel-center-label", children: centerLabel }),
-                  /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsx10("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+                  centerLabel && /* @__PURE__ */ jsx10("div", { className: "gtv-wheel-center-label", children: centerLabel }),
+                  /* @__PURE__ */ jsxs9(
                     "div",
                     {
                       className: "gtv-wheel",
@@ -2405,7 +2404,7 @@ function WheelCore({
                         "--gtv-wheel-rotation": `${rotationDeg}deg`
                       },
                       children: [
-                        sectorFillGradient && /* @__PURE__ */ jsx8(
+                        sectorFillGradient && /* @__PURE__ */ jsx10(
                           "div",
                           {
                             className: "gtv-wheel-sector-fill",
@@ -2414,7 +2413,7 @@ function WheelCore({
                             }
                           }
                         ),
-                        groups.length > 1 && groups.map((group, index) => /* @__PURE__ */ jsx8(
+                        groups.length > 1 && groups.map((group, index) => /* @__PURE__ */ jsx10(
                           "div",
                           {
                             className: "gtv-wheel-divider",
@@ -2437,12 +2436,12 @@ function WheelCore({
                             rootItemCount,
                             rootItemCountRange
                           );
-                          return /* @__PURE__ */ jsx8(
+                          return /* @__PURE__ */ jsx10(
                             "div",
                             {
                               className: "gtv-wheel-slot",
                               style: { "--gtv-chip-angle": `${angle}deg` },
-                              children: /* @__PURE__ */ jsx8("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsxs7(
+                              children: /* @__PURE__ */ jsx10("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsxs9(
                                 "button",
                                 {
                                   type: "button",
@@ -2478,8 +2477,8 @@ function WheelCore({
                                     }
                                   },
                                   children: [
-                                    PER_TREE_ACCENT_DOT && /* @__PURE__ */ jsx8("span", { className: "gtv-wheel-chip-dot" }),
-                                    /* @__PURE__ */ jsx8(
+                                    PER_TREE_ACCENT_DOT && /* @__PURE__ */ jsx10("span", { className: "gtv-wheel-chip-dot" }),
+                                    /* @__PURE__ */ jsx10(
                                       "span",
                                       {
                                         className: "gtv-node-label gtv-node-label--root",
@@ -2502,7 +2501,7 @@ function WheelCore({
             )
           }
         ),
-        panel && /* @__PURE__ */ jsx8(
+        panel && /* @__PURE__ */ jsx10(
           InfoPanel,
           {
             node: panel.node,
@@ -2549,10 +2548,6 @@ function WheelCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -2571,57 +2566,18 @@ function WheelCore({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ jsx8(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ jsx8(
-          "div",
+        overlayPanel && /* @__PURE__ */ jsx10(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ jsx10(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ jsxs7("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ jsx8(
-                "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__ */ jsx8(MdZoomIn3, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx8(
-                "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__ */ jsx8(MdZoomOut2, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx8(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([
-                    wheelCircleRef.current,
-                    ...queryTreeContentElements(treeAnchorRef.current)
-                  ]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ jsx8(MdFitScreen2, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([
+              wheelCircleRef.current,
+              ...queryTreeContentElements(treeAnchorRef.current)
+            ])
           }
         )
       ]
@@ -2630,20 +2586,19 @@ function WheelCore({
 }
 // src/GenreTreeWheel.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function GenreTreeWheel(props) {
-  return /* @__PURE__ */ jsx9(WheelCore, { ...props, direction: "bottom" });
+  return /* @__PURE__ */ jsx11(WheelCore, { ...props, direction: "bottom" });
 }
 // src/GenreTreeWheelRight.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function GenreTreeWheelRight(props) {
-  return /* @__PURE__ */ jsx10(WheelCore, { ...props, direction: "left" });
+  return /* @__PURE__ */ jsx12(WheelCore, { ...props, direction: "left" });
 }
 // src/GenreTreeWheelRadialBase.tsx
 import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef7, useState as useState6 } from "react";
-import { MdFitScreen as MdFitScreen3, MdZoomIn as MdZoomIn4, MdZoomOut as MdZoomOut3 } from "react-icons/md";
 import * as d33 from "d3";
 // src/defer-click.ts
@@ -2827,6 +2782,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;
 }
@@ -2849,14 +2805,13 @@ 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) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
-    popRadiusOfDepth(coreRootCircleRadius, depthSpacing),
-    itemCountRange
+    popRadiusOfDepth(coreRootCircleRadius, depthSpacing)
   );
 }
 var MIN_DOT_GAP = 5.6;
@@ -2866,15 +2821,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) {
+  const dotRadius = () => NODE_LAYOUT_SLOT_RADIUS;
   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: dotRadius() };
     if (!node.children) return [{ left: own, right: own }];
     const below = [];
     const childOffsets = [];
@@ -2906,7 +2861,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 = (dotRadius() + MIN_DOT_GAP / 2) / radiusOfDepth(d.depth);
     min = Math.min(min, d.x - inset);
     max = Math.max(max, d.x + inset);
   });
@@ -2916,13 +2871,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") {
+  const neededRad = measureWedge(d3Lib, hierarchy, radiusOfDepth);
   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);
@@ -3009,7 +2995,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);
@@ -3072,13 +3059,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"
@@ -3201,14 +3193,14 @@ function buildCoreHierarchy(d3Lib, coreNodes) {
   });
   return hierarchy;
 }
-function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing, itemCountRange) {
+function computeCoreRadialLayout(d3Lib, hierarchy, wedgeCenterAngleDegrees, wedgeSpanDegrees, coreRootCircleRadius, depthSpacing) {
   return layoutWedge(
     d3Lib,
     hierarchy,
     wedgeCenterAngleDegrees,
     wedgeSpanDegrees,
     coreRadiusOfDepth(coreRootCircleRadius, depthSpacing),
-    itemCountRange
+    "between-children"
   );
 }
 function calculateCoreSubtreeRadialExtent(hierarchy, depthSpacing, coreRootCircleRadius = 0) {
@@ -3248,7 +3240,7 @@ function splitRootGroupBySide(group) {
 }
 // src/GenreTreeWheelRadialBase.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var LANDING_ANGLE = 90;
 function computeContinuousAngles(groups, layout, previous) {
   const angles = /* @__PURE__ */ new Map();
@@ -3283,10 +3275,6 @@ function WheelRadialCore({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -3297,6 +3285,8 @@ function WheelRadialCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy,
   selectedNodeId
 }) {
   const index = useTreeIndex(nodes);
@@ -3455,8 +3445,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);
@@ -3572,10 +3561,11 @@ function WheelRadialCore({
       };
     });
   }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         "gtv-wheel-container--radial",
@@ -3589,7 +3579,7 @@ function WheelRadialCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             ref: stageRef,
@@ -3602,9 +3592,9 @@ function WheelRadialCore({
               transform: panZoom.transform,
               transformOrigin: "0 0"
             },
-            children: /* @__PURE__ */ jsxs8("div", { className: "gtv-wheel-stage", children: [
-              /* @__PURE__ */ jsx11("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-              /* @__PURE__ */ jsx11("div", { className: "gtv-wheel", children: sectorFills.map((sector) => /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsxs10("div", { className: "gtv-wheel-stage", children: [
+              /* @__PURE__ */ jsx13("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+              /* @__PURE__ */ jsx13("div", { className: "gtv-wheel", children: sectorFills.map((sector) => /* @__PURE__ */ jsx13(
                 "div",
                 {
                   className: "gtv-wheel-sector",
@@ -3616,7 +3606,7 @@ function WheelRadialCore({
                 },
                 `sector-${sector.rootId}`
               )) }),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13(
                 "svg",
                 {
                   ref: coreSvgRef,
@@ -3625,9 +3615,9 @@ function WheelRadialCore({
                   height: wheelRadius * 2
                 }
               ),
-              centerLabel && /* @__PURE__ */ jsx11("div", { className: "gtv-wheel-center-label", children: centerLabel }),
-              /* @__PURE__ */ jsxs8("div", { className: "gtv-wheel", children: [
-                dividerAngles.map((angle, index2) => /* @__PURE__ */ jsx11(
+              centerLabel && /* @__PURE__ */ jsx13("div", { className: "gtv-wheel-center-label", children: centerLabel }),
+              /* @__PURE__ */ jsxs10("div", { className: "gtv-wheel", children: [
+                dividerAngles.map((angle, index2) => /* @__PURE__ */ jsx13(
                   "div",
                   {
                     className: "gtv-wheel-divider",
@@ -3650,12 +3640,12 @@ function WheelRadialCore({
                     rootItemCount,
                     rootItemCountRange
                   );
-                  return /* @__PURE__ */ jsx11(
+                  return /* @__PURE__ */ jsx13(
                     "div",
                     {
                       className: "gtv-wheel-slot",
                       style: { "--gtv-chip-angle": `${angle}deg` },
-                      children: /* @__PURE__ */ jsx11("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsxs8(
+                      children: /* @__PURE__ */ jsx13("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsxs10(
                         "button",
                         {
                           type: "button",
@@ -3688,8 +3678,8 @@ function WheelRadialCore({
                             }
                           },
                           children: [
-                            PER_TREE_ACCENT_DOT && /* @__PURE__ */ jsx11("span", { className: "gtv-wheel-chip-dot" }),
-                            /* @__PURE__ */ jsx11(
+                            PER_TREE_ACCENT_DOT && /* @__PURE__ */ jsx13("span", { className: "gtv-wheel-chip-dot" }),
+                            /* @__PURE__ */ jsx13(
                               "span",
                               {
                                 className: "gtv-node-label gtv-node-label--root",
@@ -3708,7 +3698,7 @@ function WheelRadialCore({
             ] })
           }
         ),
-        panel && /* @__PURE__ */ jsx11(
+        panel && /* @__PURE__ */ jsx13(
           InfoPanel,
           {
             node: panel.node,
@@ -3754,10 +3744,6 @@ function WheelRadialCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -3776,54 +3762,15 @@ function WheelRadialCore({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ jsx11(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ jsx11(
-          "div",
+        overlayPanel && /* @__PURE__ */ jsx13(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ jsx13(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ jsxs8("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ jsx11(
-                "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__ */ jsx11(MdZoomIn4, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx11(
-                "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__ */ jsx11(MdZoomOut3, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx11(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ jsx11(MdFitScreen3, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
           }
         )
       ]
@@ -3832,14 +3779,13 @@ function WheelRadialCore({
 }
 // src/GenreTreeWheelRadial.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function GenreTreeWheelRadial(props) {
-  return /* @__PURE__ */ jsx12(WheelRadialCore, { ...props });
+  return /* @__PURE__ */ jsx14(WheelRadialCore, { ...props });
 }
 // src/GenreTreeWheelRadialPopCoreBase.tsx
 import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef8, useState as useState9 } from "react";
-import { MdFitScreen as MdFitScreen4, MdZoomIn as MdZoomIn5, MdZoomOut as MdZoomOut4 } from "react-icons/md";
 import * as d34 from "d3";
 // src/use-focus-history.ts
@@ -3869,16 +3815,16 @@ function useFocusHistory(focusNodeId, isFocusable) {
 // src/WheelBreadcrumb.tsx
 import { Fragment as Fragment3, useState as useState8 } from "react";
 import { MdHome } from "react-icons/md";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var MAX_VISIBLE_ANCESTORS = 3;
 var ANCESTORS_KEPT_WHEN_COLLAPSED = 2;
 function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
   const [expanded, setExpanded] = useState8(false);
   const collapsed = !expanded && ancestors.length > MAX_VISIBLE_ANCESTORS;
   const visibleAncestors = collapsed ? ancestors.slice(-ANCESTORS_KEPT_WHEN_COLLAPSED) : ancestors;
-  const separator = /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", children: "\u203A" });
-  return /* @__PURE__ */ jsxs9("nav", { className: "gtv-wheel-breadcrumb", "aria-label": "Breadcrumb", children: [
-    /* @__PURE__ */ jsx13(
+  const separator = /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u203A" });
+  return /* @__PURE__ */ jsxs11("nav", { className: "gtv-wheel-breadcrumb", "aria-label": "Breadcrumb", children: [
+    /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -3886,12 +3832,12 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
         "aria-label": "All genres",
         title: "All genres",
         onClick: onHome,
-        children: /* @__PURE__ */ jsx13(MdHome, { className: "gtv-icon", size: 14 })
+        children: /* @__PURE__ */ jsx15(MdHome, { className: "gtv-icon", size: 14 })
       }
     ),
     separator,
-    collapsed && /* @__PURE__ */ jsxs9(Fragment4, { children: [
-      /* @__PURE__ */ jsx13(
+    collapsed && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -3904,11 +3850,11 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
       ),
       separator
     ] }),
-    visibleAncestors.map((ancestor) => /* @__PURE__ */ jsxs9(Fragment3, { children: [
-      /* @__PURE__ */ jsx13("button", { type: "button", className: "gtv-wheel-breadcrumb-crumb", onClick: () => onAncestor(ancestor.id), children: ancestor.name }),
+    visibleAncestors.map((ancestor) => /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsx15("button", { type: "button", className: "gtv-wheel-breadcrumb-crumb", onClick: () => onAncestor(ancestor.id), children: ancestor.name }),
       separator
     ] }, ancestor.id)),
-    /* @__PURE__ */ jsx13("span", { className: "gtv-wheel-breadcrumb-current", "aria-current": "page", children: currentName })
+    /* @__PURE__ */ jsx15("span", { className: "gtv-wheel-breadcrumb-current", "aria-current": "page", children: currentName })
   ] });
 }
@@ -3969,7 +3915,7 @@ function resolvePopCoreFrame(nodes, focusNodeId) {
 }
 // src/GenreTreeWheelRadialPopCoreBase.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var LANDING_ANGLE2 = 90;
 var CHIP_GAP = 16;
 var sum = (values) => values.reduce((total, value) => total + value, 0);
@@ -4006,10 +3952,6 @@ function WheelRadialPopCoreCore({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -4020,6 +3962,8 @@ function WheelRadialPopCoreCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy,
   allowWheelRotation = true,
   selectedNodeId,
   focusNodeId: requestedFocusNodeId = null,
@@ -4092,6 +4036,7 @@ function WheelRadialPopCoreCore({
   }
   const viewportRef = useRef8(null);
   const stageRef = useRef8(null);
+  const dotRadiusMemoryRef = useRef8(/* @__PURE__ */ new Map());
   const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
   const { panel: openPanel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const isInFrame = (id) => id === focusNodeId || centerSubtreeNodeIds.has(id) || ringRootById.has(id);
@@ -4198,8 +4143,8 @@ function WheelRadialPopCoreCore({
       centerSubtreeHierarchy,
       0,
       POP_TREE_DEPTH_RADIAL_SPACING
-    ) : centerChipDiameter / 2,
-    [centerSubtreeHierarchy, centerChipDiameter]
+    ) : NODE_LAYOUT_SLOT_RADIUS,
+    [centerSubtreeHierarchy]
   );
   const maxCoreExtentDelta = useMemo5(() => {
     let extent = 0;
@@ -4207,11 +4152,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)
         );
       });
     });
@@ -4225,7 +4166,7 @@ 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 chipWidth = 2 * NODE_LAYOUT_SLOT_RADIUS;
         return [
           group.root.id,
           {
@@ -4233,16 +4174,14 @@ function WheelRadialPopCoreCore({
               (hierarchy) => measureWedge(
                 d34,
                 hierarchy,
-                popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
-                wheelItemCountRange
+                popRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING)
               )
             ),
             core: core.map(
               (hierarchy) => measureWedge(
                 d34,
                 hierarchy,
-                coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING),
-                wheelItemCountRange
+                coreRadiusOfDepth(radius, POP_TREE_DEPTH_RADIAL_SPACING)
               )
             ),
             chip: 2 * Math.asin(Math.min(1, (chipWidth / 2 + CHIP_GAP) / radius))
@@ -4250,7 +4189,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId, rootItemCountById, wheelItemCountRange]
+    [groups, branchHierarchiesByRootId]
   );
   const coreRootCircleRadius = useMemo5(
     () => solveRingRadius(
@@ -4368,8 +4307,7 @@ function WheelRadialPopCoreCore({
           angle,
           coreRootCircleRadius,
           span,
-          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-pop-branch").attr("data-gtv-branch-index", branchIndex);
@@ -4413,6 +4351,7 @@ function WheelRadialPopCoreCore({
           {
             rootLinkOrigin,
             selectedNodeId: panel?.node.id ?? null,
+            dotRadiusMemory: dotRadiusMemoryRef.current,
             nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
           }
         );
@@ -4425,16 +4364,42 @@ 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,
           angle,
           span,
           coreRootCircleRadius,
-          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 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,
@@ -4477,7 +4442,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;
+            }
           }
         );
       });
@@ -4532,6 +4501,7 @@ function WheelRadialPopCoreCore({
           skipRootNode: true,
           isMainstreamSector: isCenterMainstream,
           selectedNodeId: panel?.node.id ?? null,
+          dotRadiusMemory: dotRadiusMemoryRef.current,
           nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
         }
       );
@@ -4727,10 +4697,11 @@ function WheelRadialPopCoreCore({
       };
     });
   }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         "gtv-wheel-container--radial",
@@ -4745,7 +4716,7 @@ function WheelRadialPopCoreCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs12(
           "div",
           {
             ref: stageRef,
@@ -4759,9 +4730,9 @@ function WheelRadialPopCoreCore({
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ jsxs10("div", { className: "gtv-wheel-stage", children: [
-                /* @__PURE__ */ jsx14("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-                isPopExpanded && /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsxs12("div", { className: "gtv-wheel-stage", children: [
+                /* @__PURE__ */ jsx16("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+                isPopExpanded && /* @__PURE__ */ jsx16(
                   "div",
                   {
                     className: "gtv-wheel-middle-circle",
@@ -4770,8 +4741,8 @@ function WheelRadialPopCoreCore({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs10("div", { className: "gtv-wheel", children: [
-                  sectorFills.map((sector) => /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsxs12("div", { className: "gtv-wheel", children: [
+                  sectorFills.map((sector) => /* @__PURE__ */ jsx16(
                     "div",
                     {
                       className: "gtv-wheel-sector",
@@ -4783,8 +4754,8 @@ function WheelRadialPopCoreCore({
                     },
                     `sector-${sector.rootId}`
                   )),
-                  /* @__PURE__ */ jsx14("div", { className: "gtv-wheel-inner-tint" }),
-                  isPopExpanded && /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx16("div", { className: "gtv-wheel-inner-tint" }),
+                  isPopExpanded && /* @__PURE__ */ jsx16(
                     "div",
                     {
                       className: "gtv-wheel-middle-tint",
@@ -4794,7 +4765,7 @@ function WheelRadialPopCoreCore({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx16(
                   "svg",
                   {
                     ref: popSvgRef,
@@ -4803,7 +4774,7 @@ function WheelRadialPopCoreCore({
                     height: svgCanvasRadius * 2
                   }
                 ),
-                /* @__PURE__ */ jsx14("div", { className: "gtv-wheel-center-node", children: /* @__PURE__ */ jsx14("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx16("div", { className: "gtv-wheel-center-node", children: /* @__PURE__ */ jsx16("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsx16(
                   "button",
                   {
                     ref: centerChipRef,
@@ -4841,8 +4812,8 @@ function WheelRadialPopCoreCore({
                     "aria-label": centerNode.name
                   }
                 ) }) }),
-                /* @__PURE__ */ jsxs10("div", { className: "gtv-wheel", children: [
-                  dividerAngles.map((angle, index2) => /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsxs12("div", { className: "gtv-wheel", children: [
+                  dividerAngles.map((angle, index2) => /* @__PURE__ */ jsx16(
                     "div",
                     {
                       className: "gtv-wheel-divider",
@@ -4861,12 +4832,12 @@ function WheelRadialPopCoreCore({
                       group.root.id
                     );
                     const diameter = 2 * calculateNodeDotRadius(rootItemCount, wheelItemCountRange);
-                    return /* @__PURE__ */ jsx14(
+                    return /* @__PURE__ */ jsx16(
                       "div",
                       {
                         className: "gtv-wheel-slot",
                         style: { "--gtv-chip-angle": `${angle}deg` },
-                        children: /* @__PURE__ */ jsx14("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsx14(
+                        children: /* @__PURE__ */ jsx16("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ jsx16(
                           "button",
                           {
                             type: "button",
@@ -4908,7 +4879,7 @@ function WheelRadialPopCoreCore({
                   })
                 ] })
               ] }),
-              regionLabel && index.byId.has(regionLabel.rootId) && /* @__PURE__ */ jsx14(
+              regionLabel && index.byId.has(regionLabel.rootId) && /* @__PURE__ */ jsx16(
                 "div",
                 {
                   ref: regionLabelRef,
@@ -4926,7 +4897,7 @@ function WheelRadialPopCoreCore({
             ]
           }
         ),
-        panel && /* @__PURE__ */ jsx14(
+        panel && /* @__PURE__ */ jsx16(
           InfoPanel,
           {
             node: panel.node,
@@ -4953,10 +4924,6 @@ function WheelRadialPopCoreCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -4976,8 +4943,8 @@ function WheelRadialPopCoreCore({
             onZoomIn: onFocusChange && panel.node.id !== focusNodeId && isZoomableNode(nodes, panel.node.id) ? () => onFocusChange(panel.node.id, "zoom-in") : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ jsx14(OverlayPanel, { ...overlayPanel }),
-        onFocusChange && focusNodeId !== null && /* @__PURE__ */ jsx14(
+        overlayPanel && /* @__PURE__ */ jsx16(OverlayPanel, { ...overlayPanel }),
+        onFocusChange && focusNodeId !== null && /* @__PURE__ */ jsx16(
           WheelBreadcrumb,
           {
             ancestors: index.ancestorsOf(focusNodeId).filter((ancestor) => isZoomableNode(nodes, ancestor.id)),
@@ -4993,56 +4960,17 @@ function WheelRadialPopCoreCore({
           },
           focusNodeId
         ),
-        /* @__PURE__ */ jsx14(
-          "div",
+        /* @__PURE__ */ jsx16(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ jsxs10("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ jsx14(
-                "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__ */ jsx14(MdZoomIn5, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx14(
-                "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__ */ jsx14(MdZoomOut4, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ jsx14(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([
-                    wheelCircleRef.current,
-                    ...queryTreeContentElements(popSvgRef.current)
-                  ]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ jsx14(MdFitScreen4, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([
+              wheelCircleRef.current,
+              ...queryTreeContentElements(popSvgRef.current)
+            ])
           }
         )
       ]
@@ -5051,9 +4979,9 @@ function WheelRadialPopCoreCore({
 }
 // src/GenreTreeWheelRadialPopCore.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function GenreTreeWheelRadialPopCore(props) {
-  return /* @__PURE__ */ jsx15(WheelRadialPopCoreCore, { ...props });
+  return /* @__PURE__ */ jsx17(WheelRadialPopCoreCore, { ...props });
 }
 // src/GenreTreeOutline.tsx
@@ -5066,7 +4994,7 @@ import {
   useState as useState10,
   useSyncExternalStore
 } from "react";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function createOutlineStore(initial) {
   let state = initial;
   const listeners = /* @__PURE__ */ new Set();
@@ -5140,9 +5068,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__ */ jsxs11("span", { className: ["gtv-outline-row", isSelected && "gtv-outline-row--selected"].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx16("span", { className: "gtv-outline-dot", style: { background: model.styleOf(node).fill } }),
-    /* @__PURE__ */ jsx16(
+  const row = /* @__PURE__ */ jsxs13("span", { className: ["gtv-outline-row", isSelected && "gtv-outline-row--selected"].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx18("span", { className: "gtv-outline-dot", style: { background: model.styleOf(node).fill } }),
+    /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -5159,16 +5087,16 @@ function OutlineNodeView({
         children: node.name
       }
     ),
-    /* @__PURE__ */ jsx16("span", { className: "gtv-outline-count", children: itemCount })
+    /* @__PURE__ */ jsx18("span", { className: "gtv-outline-count", children: itemCount })
   ] });
   const itemProps = { model, store, callbacks };
-  return /* @__PURE__ */ jsx16("li", { className: "gtv-outline-item", "data-gtv-node-id": nodeId, children: children.length > 0 ? /* @__PURE__ */ jsxs11("details", { open: isOpen, children: [
-    /* @__PURE__ */ jsx16("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(nodeId)), children: row }),
-    isOpen && /* @__PURE__ */ jsx16("ul", { className: "gtv-outline-list", children: split ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-      /* @__PURE__ */ jsx16(OutlineSection, { rootId: nodeId, kind: "core", branches: split.coreBranches, ...itemProps }),
-      /* @__PURE__ */ jsx16(OutlineSection, { rootId: nodeId, kind: "pop", branches: split.popBranches, ...itemProps })
-    ] }) : children.map((child) => /* @__PURE__ */ jsx16(OutlineNode, { nodeId: child.id, isRoot: false, ...itemProps }, child.id)) })
-  ] }) : /* @__PURE__ */ jsx16("div", { className: "gtv-outline-leaf", children: row }) });
+  return /* @__PURE__ */ jsx18("li", { className: "gtv-outline-item", "data-gtv-node-id": nodeId, children: children.length > 0 ? /* @__PURE__ */ jsxs13("details", { open: isOpen, children: [
+    /* @__PURE__ */ jsx18("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(nodeId)), children: row }),
+    isOpen && /* @__PURE__ */ jsx18("ul", { className: "gtv-outline-list", children: split ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+      /* @__PURE__ */ jsx18(OutlineSection, { rootId: nodeId, kind: "core", branches: split.coreBranches, ...itemProps }),
+      /* @__PURE__ */ jsx18(OutlineSection, { rootId: nodeId, kind: "pop", branches: split.popBranches, ...itemProps })
+    ] }) : children.map((child) => /* @__PURE__ */ jsx18(OutlineNode, { nodeId: child.id, isRoot: false, ...itemProps }, child.id)) })
+  ] }) : /* @__PURE__ */ jsx18("div", { className: "gtv-outline-leaf", children: row }) });
 }
 var OutlineNode = memo(OutlineNodeView);
 var OutlineSection = memo(function OutlineSection2({
@@ -5182,9 +5110,9 @@ var OutlineSection = 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__ */ jsx16("li", { className: "gtv-outline-item", children: /* @__PURE__ */ jsxs11("details", { open: isOpen, children: [
-    /* @__PURE__ */ jsx16("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(key)), children: /* @__PURE__ */ jsx16("span", { className: "gtv-outline-section-label", children: kind === "core" ? "Core" : "Pop" }) }),
-    isOpen && /* @__PURE__ */ jsx16("ul", { className: "gtv-outline-list", children: branches.map(({ child }) => /* @__PURE__ */ jsx16(OutlineNode, { nodeId: child.id, isRoot: false, model, store, callbacks }, child.id)) })
+  return /* @__PURE__ */ jsx18("li", { className: "gtv-outline-item", children: /* @__PURE__ */ jsxs13("details", { open: isOpen, children: [
+    /* @__PURE__ */ jsx18("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(key)), children: /* @__PURE__ */ jsx18("span", { className: "gtv-outline-section-label", children: kind === "core" ? "Core" : "Pop" }) }),
+    isOpen && /* @__PURE__ */ jsx18("ul", { className: "gtv-outline-list", children: branches.map(({ child }) => /* @__PURE__ */ jsx18(OutlineNode, { nodeId: child.id, isRoot: false, model, store, callbacks }, child.id)) })
   ] }) });
 });
 function GenreTreeOutline(props) {
@@ -5201,10 +5129,6 @@ function GenreTreeOutline(props) {
     hideInfoPanelTitle = false,
     itemCountLabel,
     readOnly,
-    editMode,
-    onEditModeChange,
-    renderTitleEditor,
-    renderParentsEditor,
     renderDangerZone,
     expanded,
     onExpandedChange,
@@ -5305,12 +5229,12 @@ function GenreTreeOutline(props) {
   }, [selectedNodeId, store]);
   const selectedNode = selectedId === null ? void 0 : index.byId.get(selectedId);
   const itemProps = { model, store, callbacks };
-  return /* @__PURE__ */ jsxs11("div", { className: ["gtv-outline", selectedNode && "gtv-outline--panel-open", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs11("div", { className: "gtv-outline-scroll", ref: scrollRef, children: [
-      /* @__PURE__ */ jsx16("ul", { className: "gtv-outline-list gtv-outline-list--roots", children: [model.centerRoot, ...model.ringRoots].map((root) => /* @__PURE__ */ jsx16(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) }),
-      model.detachedRoots.length > 0 && /* @__PURE__ */ jsx16("ul", { className: "gtv-outline-list gtv-outline-list--roots gtv-outline-list--detached", children: model.detachedRoots.map((root) => /* @__PURE__ */ jsx16(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) })
+  return /* @__PURE__ */ jsxs13("div", { className: ["gtv-outline", selectedNode && "gtv-outline--panel-open", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs13("div", { className: "gtv-outline-scroll", ref: scrollRef, children: [
+      /* @__PURE__ */ jsx18("ul", { className: "gtv-outline-list gtv-outline-list--roots", children: [model.centerRoot, ...model.ringRoots].map((root) => /* @__PURE__ */ jsx18(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) }),
+      model.detachedRoots.length > 0 && /* @__PURE__ */ jsx18("ul", { className: "gtv-outline-list gtv-outline-list--roots gtv-outline-list--detached", children: model.detachedRoots.map((root) => /* @__PURE__ */ jsx18(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) })
     ] }),
-    selectedNode && /* @__PURE__ */ jsx16(
+    selectedNode && /* @__PURE__ */ jsx18(
       InfoPanel,
       {
         node: selectedNode,
@@ -5331,10 +5255,6 @@ function GenreTreeOutline(props) {
         hideTitle: hideInfoPanelTitle,
         itemCountLabel,
         readOnly,
-        editMode,
-        onEditModeChange,
-        renderTitleEditor,
-        renderParentsEditor,
         renderDangerZone,
         expanded,
         onExpandedChange,
@@ -5353,13 +5273,13 @@ function GenreTreeOutline(props) {
         } : void 0
       }
     ),
-    overlayPanel && /* @__PURE__ */ jsx16(OverlayPanel, { ...overlayPanel })
+    overlayPanel && /* @__PURE__ */ jsx18(OverlayPanel, { ...overlayPanel })
   ] });
 }
 // src/GenreTreeSkeleton.tsx
 import { useId } from "react";
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var CARD_FILL = "#F4F4F5";
 var CARD_BORDER_COLOR = "#E4E4E7";
 var CONNECTOR_COLOR2 = "#D4D4D8";
@@ -5464,8 +5384,8 @@ function SkeletonCard({
   card,
   rootAccent
 }) {
-  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx19(
       "rect",
       {
         x: card.x,
@@ -5479,7 +5399,7 @@ function SkeletonCard({
         strokeWidth: rootAccent ? 1.5 : 1
       }
     ),
-    rootAccent && /* @__PURE__ */ jsx17(
+    rootAccent && /* @__PURE__ */ jsx19(
       "circle",
       {
         cx: card.x + 18,
@@ -5497,9 +5417,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__ */ jsxs12("div", { className: "gtv-skeleton", children: [
-    /* @__PURE__ */ jsx17("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14("div", { className: "gtv-skeleton", children: [
+    /* @__PURE__ */ jsx19("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    /* @__PURE__ */ jsxs14(
       "svg",
       {
         viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
@@ -5508,7 +5428,7 @@ function GenreTreeSkeleton() {
         className: "gtv-skeleton-svg",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsx17("style", { children: `
+          /* @__PURE__ */ jsx19("style", { children: `
           @keyframes ${animationName} {
             from { transform: translateX(0); }
             to { transform: translateX(${sweepDistance}px); }
@@ -5522,9 +5442,9 @@ function GenreTreeSkeleton() {
             }
           }
         ` }),
-          /* @__PURE__ */ jsxs12("defs", { children: [
-            /* @__PURE__ */ jsxs12("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-              /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsxs14("defs", { children: [
+            /* @__PURE__ */ jsxs14("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+              /* @__PURE__ */ jsx19(
                 "stop",
                 {
                   offset: "0%",
@@ -5532,7 +5452,7 @@ function GenreTreeSkeleton() {
                   stopOpacity: 0
                 }
               ),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx19(
                 "stop",
                 {
                   offset: "50%",
@@ -5540,7 +5460,7 @@ function GenreTreeSkeleton() {
                   stopOpacity: 0.9
                 }
               ),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx19(
                 "stop",
                 {
                   offset: "100%",
@@ -5549,8 +5469,8 @@ function GenreTreeSkeleton() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs12("mask", { id: maskId, children: [
-              ALL_LINKS.map((link, i) => /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsxs14("mask", { id: maskId, children: [
+              ALL_LINKS.map((link, i) => /* @__PURE__ */ jsx19(
                 "path",
                 {
                   d: connectorPath(link.from, link.to),
@@ -5560,7 +5480,7 @@ function GenreTreeSkeleton() {
                 },
                 `link-mask-${i}`
               )),
-              ALL_CARDS.map(({ card }, i) => /* @__PURE__ */ jsx17(
+              ALL_CARDS.map(({ card }, i) => /* @__PURE__ */ jsx19(
                 "rect",
                 {
                   x: card.x,
@@ -5575,7 +5495,7 @@ function GenreTreeSkeleton() {
               ))
             ] })
           ] }),
-          ALL_LINKS.map((link, i) => /* @__PURE__ */ jsx17(
+          ALL_LINKS.map((link, i) => /* @__PURE__ */ jsx19(
             "path",
             {
               d: connectorPath(link.from, link.to),
@@ -5585,8 +5505,8 @@ function GenreTreeSkeleton() {
             },
             `link-${i}`
           )),
-          ALL_CARDS.map(({ card, rootAccent }, i) => /* @__PURE__ */ jsx17(SkeletonCard, { card, rootAccent }, `card-${i}`)),
-          /* @__PURE__ */ jsx17("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx17(
+          ALL_CARDS.map(({ card, rootAccent }, i) => /* @__PURE__ */ jsx19(SkeletonCard, { card, rootAccent }, `card-${i}`)),
+          /* @__PURE__ */ jsx19("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx19(
             "rect",
             {
               className: shimmerBandClass,
@@ -5605,7 +5525,7 @@ function GenreTreeSkeleton() {
 // src/GenreTreeWheelSkeleton.tsx
 import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef10 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var SHAPE_COLOR = "#D4D4D8";
 var SECTOR_FILL_OPACITY = 0.22;
 var INNER_TINT_OPACITY = 0.55;
@@ -5750,8 +5670,8 @@ function GenreTreeWheelSkeleton() {
     sharedStartTime ??= animation.startTime ?? document.timeline.currentTime;
     animation.startTime = sharedStartTime;
   }, []);
-  return /* @__PURE__ */ jsxs13("div", { className: "gtv-wheel-skeleton", children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs15("div", { className: "gtv-wheel-skeleton", children: [
+    /* @__PURE__ */ jsx20(
       "div",
       {
         className: "gtv-wheel-skeleton-sector-layer",
@@ -5759,8 +5679,8 @@ function GenreTreeWheelSkeleton() {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx18("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx20("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    /* @__PURE__ */ jsxs15(
       "svg",
       {
         viewBox: `${CANVAS_ORIGIN} ${CANVAS_ORIGIN} ${CANVAS_SIZE} ${CANVAS_SIZE}`,
@@ -5768,14 +5688,14 @@ function GenreTreeWheelSkeleton() {
         className: "gtv-wheel-skeleton-svg",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsxs13("defs", { children: [
-            /* @__PURE__ */ jsxs13("radialGradient", { id: mainstreamId, children: [
-              /* @__PURE__ */ jsx18("stop", { offset: "0%", stopColor: "#FFFFFF", stopOpacity: 0.45 }),
-              /* @__PURE__ */ jsx18("stop", { offset: "65%", stopColor: "#FFFFFF", stopOpacity: 0.15 }),
-              /* @__PURE__ */ jsx18("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: 0 })
+          /* @__PURE__ */ jsxs15("defs", { children: [
+            /* @__PURE__ */ jsxs15("radialGradient", { id: mainstreamId, children: [
+              /* @__PURE__ */ jsx20("stop", { offset: "0%", stopColor: "#FFFFFF", stopOpacity: 0.45 }),
+              /* @__PURE__ */ jsx20("stop", { offset: "65%", stopColor: "#FFFFFF", stopOpacity: 0.15 }),
+              /* @__PURE__ */ jsx20("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: 0 })
             ] }),
-            /* @__PURE__ */ jsxs13("g", { id: shapesId, children: [
-              LINKS.map((link, i) => /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsxs15("g", { id: shapesId, children: [
+              LINKS.map((link, i) => /* @__PURE__ */ jsx20(
                 "path",
                 {
                   d: link.d,
@@ -5787,21 +5707,21 @@ function GenreTreeWheelSkeleton() {
                 },
                 `link-${i}`
               )),
-              DOTS.map((dot, i) => /* @__PURE__ */ jsx18("circle", { cx: dot.point.x, cy: dot.point.y, r: dot.r, fill: "currentColor" }, `dot-${i}`))
+              DOTS.map((dot, i) => /* @__PURE__ */ jsx20("circle", { cx: dot.point.x, cy: dot.point.y, r: dot.r, fill: "currentColor" }, `dot-${i}`))
             ] })
           ] }),
-          /* @__PURE__ */ jsx18("circle", { cx: 0, cy: 0, r: RING_RADIUS, fill: "#FFFFFF", fillOpacity: INNER_TINT_OPACITY }),
-          /* @__PURE__ */ jsx18("circle", { cx: 0, cy: 0, r: MAINSTREAM_RADIUS, fill: `url(#${mainstreamId})` }),
-          /* @__PURE__ */ jsx18("use", { href: `#${shapesId}`, color: SHAPE_COLOR })
+          /* @__PURE__ */ jsx20("circle", { cx: 0, cy: 0, r: RING_RADIUS, fill: "#FFFFFF", fillOpacity: INNER_TINT_OPACITY }),
+          /* @__PURE__ */ jsx20("circle", { cx: 0, cy: 0, r: MAINSTREAM_RADIUS, fill: `url(#${mainstreamId})` }),
+          /* @__PURE__ */ jsx20("use", { href: `#${shapesId}`, color: SHAPE_COLOR })
         ]
       }
     ),
-    /* @__PURE__ */ jsx18("div", { className: "gtv-wheel-skeleton-shimmer", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("div", { ref: wedgeRef, className: "gtv-wheel-skeleton-shimmer-wedge" }) })
+    /* @__PURE__ */ jsx20("div", { className: "gtv-wheel-skeleton-shimmer", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("div", { ref: wedgeRef, className: "gtv-wheel-skeleton-shimmer-wedge" }) })
   ] });
 }
 // src/GenreTreeOutlineSkeleton.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var ROWS = [
   { depth: 0, width: 38 },
   { depth: 0, width: 26 },
@@ -5813,9 +5733,9 @@ var ROWS = [
   { depth: 0, width: 22 }
 ];
 function GenreTreeOutlineSkeleton() {
-  return /* @__PURE__ */ jsxs14("div", { className: "gtv-skeleton gtv-outline-skeleton", children: [
-    /* @__PURE__ */ jsx19("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    ROWS.map((row, i) => /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs16("div", { className: "gtv-skeleton gtv-outline-skeleton", children: [
+    /* @__PURE__ */ jsx21("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    ROWS.map((row, i) => /* @__PURE__ */ jsx21(
       "div",
       {
         className: "gtv-outline-skeleton-row",
@@ -5828,13 +5748,13 @@ function GenreTreeOutlineSkeleton() {
 }
 // src/GenreTreeViewSkeleton.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function GenreTreeViewSkeleton({ viewMode }) {
   if (viewMode === "wheel" || viewMode === "pop-core") {
-    return /* @__PURE__ */ jsx20("div", { className: "gtv-view-skeleton-wheel-wrapper", children: /* @__PURE__ */ jsx20(GenreTreeWheelSkeleton, {}) });
+    return /* @__PURE__ */ jsx22("div", { className: "gtv-view-skeleton-wheel-wrapper", children: /* @__PURE__ */ jsx22(GenreTreeWheelSkeleton, {}) });
   }
-  if (viewMode === "outline") return /* @__PURE__ */ jsx20(GenreTreeOutlineSkeleton, {});
-  return /* @__PURE__ */ jsx20(GenreTreeSkeleton, {});
+  if (viewMode === "outline") return /* @__PURE__ */ jsx22(GenreTreeOutlineSkeleton, {});
+  return /* @__PURE__ */ jsx22(GenreTreeSkeleton, {});
 }
 export {
   DEFAULT_FRAME_HEIGHT,