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.cjs CHANGED Viewed

@@ -51,7 +51,6 @@ module.exports = __toCommonJS(src_exports);
 // src/GenreTree.tsx
 var import_react8 = require("react");
 var d3 = __toESM(require("d3"), 1);
-var import_md6 = require("react-icons/md");
 // src/NodeHelper.tsx
 var import_server = __toESM(require("react-dom/server"), 1);
@@ -75,6 +74,9 @@ var MENU_WIDTH = 130;
 var PER_TREE_ACCENT_DOT = true;
 var ROOT_TINT_RATIO = 0.08;
 var POP_SECTOR_TINT_RATIO = 0.8;
+var UNDERGROUND_DARKEN_RATIO = 0.62;
+var UNDERGROUND_SECTOR_FILL_OPACITY = 0.15;
+var SCENE_SECTOR_OUTER_RADIUS = 1e5;
 var CENTER_NODE_NAME = "Mainstream Pop";
 var TREE_COLORS = [
   "#4F46E5",
@@ -156,6 +158,11 @@ function isMainstreamPopLineage(index, nodeId) {
   const topRoot = index.ancestorsOf(nodeId)[0] ?? index.byId.get(nodeId);
   return topRoot?.name === CENTER_NODE_NAME;
 }
+function shadeSurface(hex, ratio) {
+  const channel = (offset) => parseInt(hex.slice(offset, offset + 2), 16);
+  const toHex = (value) => Math.round(value * ratio).toString(16).padStart(2, "0");
+  return `#${toHex(channel(1))}${toHex(channel(3))}${toHex(channel(5))}`;
+}
 function getGenreNodeStyle(index, nodeId) {
   if (isMainstreamPopLineage(index, nodeId)) {
     return { fill: tintSurface("#ffffff", POP_SECTOR_TINT_RATIO), textColor: TEXT_COLOR };
@@ -244,10 +251,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;
@@ -634,6 +644,61 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
   return svg;
 }
+// src/FloatingControls.tsx
+var import_md = require("react-icons/md");
+// src/BusyIndicator.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BusyIndicator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gtv-busy", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gtv-busy-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Updating genre tree\u2026" })
+  ] });
+}
+// src/FloatingControls.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FloatingControls({ panZoom, onFit, orientation, leading, busy }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: [
+        "gtv-wheel-floating-controls",
+        orientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
+      ].filter(Boolean).join(" "),
+      children: [
+        busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BusyIndicator, {}),
+        leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gtv-floating-controls-leading", children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gtv-zoom-controls", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: ["gtv-zoom-btn", !panZoom.canZoomIn && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
+              disabled: !panZoom.canZoomIn,
+              onClick: panZoom.zoomIn,
+              "aria-label": "Zoom in",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdZoomIn, { className: "gtv-icon", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: ["gtv-zoom-btn", !panZoom.canZoomOut && "gtv-zoom-btn--disabled"].filter(Boolean).join(" "),
+              disabled: !panZoom.canZoomOut,
+              onClick: panZoom.zoomOut,
+              "aria-label": "Zoom out",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdZoomOut, { className: "gtv-icon", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "gtv-zoom-btn", onClick: onFit, "aria-label": "Fit to frame", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdFitScreen, { className: "gtv-icon", size: 18 }) })
+        ] })
+      ]
+    }
+  );
+}
 // src/use-pan-zoom.ts
 var import_react = require("react");
@@ -1270,13 +1335,13 @@ function useTreeIndex(nodes) {
 // src/InfoPanel.tsx
 var import_react6 = require("react");
-var import_md4 = require("react-icons/md");
+var import_md5 = require("react-icons/md");
 // src/InfoPanelExpandButton.tsx
-var import_md = require("react-icons/md");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_md2 = require("react-icons/md");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "button",
@@ -1284,19 +1349,19 @@ function InfoPanelExpandButton({ expanded, onExpandedChange, style }) {
       style,
       onClick: () => onExpandedChange(!expanded),
       "aria-label": expanded ? "Collapse panel" : "Expand panel",
-      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_md.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_md.MdOpenInFull, { className: "gtv-icon", size: 16 })
+      children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md2.MdCloseFullscreen, { className: "gtv-icon", size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md2.MdOpenInFull, { className: "gtv-icon", size: 16 })
     }
   );
 }
 // src/InfoPanelSection.tsx
 var import_react4 = require("react");
-var import_md2 = require("react-icons/md");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_md3 = require("react-icons/md");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function InfoPanelSection({ title, children }) {
   const [open, setOpen] = (0, import_react4.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-children", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         type: "button",
@@ -1304,8 +1369,8 @@ function InfoPanelSection({ title, children }) {
         "aria-expanded": open,
         onClick: () => setOpen((isOpen) => !isOpen),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "gtv-info-panel-children-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md2.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-children-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md3.MdExpandMore, { className: "gtv-icon gtv-info-panel-section-chevron", size: 16 })
         ]
       }
     ),
@@ -1315,10 +1380,10 @@ function InfoPanelSection({ title, children }) {
 // src/NodeToolbar.tsx
 var import_react5 = require("react");
-var import_md3 = require("react-icons/md");
+var import_md4 = require("react-icons/md");
 var import_fa = require("react-icons/fa");
 var import_pi2 = require("react-icons/pi");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function NodeToolbar({
   node,
   playingNodeId,
@@ -1339,9 +1404,9 @@ function NodeToolbar({
   const isPlayable = node.itemCount > 0;
   const isThisPlaying = playingNodeId === node.id;
   const playLabel = isThisPlaying && playState === "playing" ? "Pause" : isThisPlaying && playState === "loading" ? "Loading..." : "Play";
-  const playIcon = isThisPlaying && playState === "playing" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaPause, { className: "gtv-icon", size: "0.6em" }) : isThisPlaying && playState === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaSpinner, { className: "gtv-icon gtv-icon--spin", size: "0.6em" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaPlay, { className: "gtv-icon", size: "0.6em" });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["gtv-toolbar", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const playIcon = isThisPlaying && playState === "playing" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPause, { className: "gtv-icon", size: "0.6em" }) : isThisPlaying && playState === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaSpinner, { className: "gtv-icon gtv-icon--spin", size: "0.6em" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPlay, { className: "gtv-icon", size: "0.6em" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["gtv-toolbar", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -1353,8 +1418,8 @@ function NodeToolbar({
         children: playIcon
       }
     ),
-    isActionable && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    isActionable && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -1362,13 +1427,13 @@ function NodeToolbar({
           title: "Add sub-genre",
           "aria-label": "Add sub-genre",
           onClick: () => onAddChild?.(node.id),
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaPlus, { className: "gtv-icon", size: "0.6em" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPlus, { className: "gtv-icon", size: "0.6em" })
         }
       ),
       primaryExtraActions.map((action) => {
         const enabled = action.enabled ? action.enabled(node) : true;
         const label = action.label(node);
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -1382,8 +1447,8 @@ function NodeToolbar({
           action.key
         );
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gtv-toolbar-overflow", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-toolbar-overflow", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -1393,11 +1458,11 @@ function NodeToolbar({
             "aria-haspopup": "menu",
             "aria-expanded": menuOpen,
             onClick: () => setMenuOpen((open) => !open),
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md3.MdMoreVert, { size: "0.6em" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md4.MdMoreVert, { size: "0.6em" })
           }
         ),
-        menuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        menuOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-menu-card gtv-toolbar-overflow-menu", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               type: "button",
@@ -1407,12 +1472,12 @@ function NodeToolbar({
                 onRenameRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md3.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: "Rename" })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md4.MdModeEdit, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Rename" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               type: "button",
@@ -1422,14 +1487,14 @@ function NodeToolbar({
                 onReparentRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_pi2.PiGraphFill, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: "Change parent" })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_pi2.PiGraphFill, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Change parent" })
               ]
             }
           ),
           overflowExtraActions.map((action) => {
             const enabled = action.enabled ? action.enabled(node) : true;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 type: "button",
@@ -1440,15 +1505,15 @@ function NodeToolbar({
                   action.onClick(event, node);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: action.icon(node) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: action.label(node) })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: action.icon(node) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: action.label(node) })
                 ]
               },
               action.key
             );
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gtv-menu-divider" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "gtv-menu-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               type: "button",
@@ -1458,8 +1523,8 @@ function NodeToolbar({
                 onDeleteRequest?.(node);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaTrashAlt, { className: "gtv-icon", size: 13 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gtv-menu-row-label", children: "Delete" })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaTrashAlt, { className: "gtv-icon", size: 13 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "gtv-menu-row-label", children: "Delete" })
               ]
             }
           )
@@ -1470,7 +1535,7 @@ function NodeToolbar({
 }
 // src/InfoPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MINI_NODE_MIN_DIAMETER = 14;
 var MINI_NODE_MAX_DIAMETER = 32;
 var MINI_NODE_MIN_FONT_SIZE = 10;
@@ -1502,10 +1567,6 @@ function InfoPanel({
   onZoomIn,
   actions,
   readOnly = false,
-  editMode = false,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded = false,
   onExpandedChange,
@@ -1516,10 +1577,8 @@ function InfoPanel({
   (0, import_react6.useEffect)(() => {
     panelRef.current?.toggleAttribute("inert", collapsed);
   }, [collapsed]);
-  const editing = editMode && !readOnly;
-  const shownParent = editing && renderParentsEditor ? null : parentNode;
   const miniTreeRange = getItemCountRange([
-    ...shownParent ? [shownParent.node] : [],
+    ...parentNode ? [parentNode.node] : [],
     node,
     ...childNodes.map((child) => child.node)
   ]);
@@ -1533,9 +1592,9 @@ function InfoPanel({
   };
   const miniNodeContent = (target, background, range) => {
     const { diameter, fontSize } = miniNodeSize(target, range);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-mini-dot", style: { background, width: diameter, height: diameter } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-mini-label", style: { fontSize }, children: target.name })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "gtv-info-panel-mini-dot", style: { background, width: diameter, height: diameter } }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "gtv-info-panel-mini-label", style: { fontSize }, children: target.name })
     ] });
   };
   const sortedChildNodes = [...childNodes].sort((a, b) => b.node.itemCount - a.node.itemCount);
@@ -1548,9 +1607,9 @@ function InfoPanel({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [expanded, onExpandedChange]);
-  const dangerZone = editing && renderDangerZone && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "gtv-info-panel-danger-zone", children: renderDangerZone(node) });
-  const toolbar = actions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NodeToolbar, { node, className: "gtv-info-panel-toolbar", ...actions }, node.id) : null;
-  const ancestors = ancestorNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoPanelSection, { title: "Ancestors", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "gtv-info-panel-children-list gtv-info-panel-ancestors-list", children: ancestorNodes.map(({ node: ancestor, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const dangerZone = !readOnly && renderDangerZone && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "gtv-info-panel-danger-zone", children: renderDangerZone(node) });
+  const toolbar = actions ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NodeToolbar, { node, className: "gtv-info-panel-toolbar", ...actions }, node.id) : null;
+  const ancestors = ancestorNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelSection, { title: "Ancestors", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "gtv-info-panel-children-list gtv-info-panel-ancestors-list", children: ancestorNodes.map(({ node: ancestor, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       type: "button",
@@ -1560,76 +1619,73 @@ function InfoPanel({
       children: miniNodeContent(ancestor, fill2, ancestorRange)
     }
   ) }, ancestor.id)) }) }) : null;
-  const family = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    editing && renderParentsEditor && renderParentsEditor(node),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoPanelSection, { title: "Family", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-mini-tree", children: [
-      shownParent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "gtv-info-panel-mini-tree-parent", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const family = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelSection, { title: "Family", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-mini-tree", children: [
+    parentNode && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "gtv-info-panel-mini-tree-parent", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "gtv-info-panel-child",
+        title: parentNode.node.name,
+        onClick: () => onSelectNode(parentNode.node.id),
+        children: miniNodeContent(parentNode.node, parentNode.fill, miniTreeRange)
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: `gtv-info-panel-mini-tree-node${childNodes.length === 0 ? " gtv-info-panel-mini-tree-node--leaf" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: "gtv-info-panel-child gtv-info-panel-mini-tree-current",
+            title: node.name,
+            children: miniNodeContent(node, fill, miniTreeRange)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-mini-tree-children", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
+        childNodes.length,
+        " ",
+        childNodes.length <= 1 ? "child" : "children"
+      ] }),
+      childNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "gtv-info-panel-children-list", children: sortedChildNodes.map(({ node: child, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
           className: "gtv-info-panel-child",
-          title: shownParent.node.name,
-          onClick: () => onSelectNode(shownParent.node.id),
-          children: miniNodeContent(shownParent.node, shownParent.fill, miniTreeRange)
+          title: child.name,
+          onClick: () => onSelectNode(child.id),
+          children: miniNodeContent(child, fill2, miniTreeRange)
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
-        {
-          className: `gtv-info-panel-mini-tree-node${childNodes.length === 0 ? " gtv-info-panel-mini-tree-node--leaf" : ""}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "span",
-            {
-              className: "gtv-info-panel-child gtv-info-panel-mini-tree-current",
-              title: node.name,
-              children: miniNodeContent(node, fill, miniTreeRange)
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-mini-tree-children", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
-          childNodes.length,
-          " ",
-          childNodes.length <= 1 ? "child" : "children"
-        ] }),
-        childNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "gtv-info-panel-children-list", children: sortedChildNodes.map(({ node: child, fill: fill2 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "gtv-info-panel-child",
-            title: child.name,
-            onClick: () => onSelectNode(child.id),
-            children: miniNodeContent(child, fill2, miniTreeRange)
-          }
-        ) }, child.id)) })
-      ] })
-    ] }) })
-  ] });
-  const itemCount = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("dl", { className: "gtv-info-panel-fields", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dt", { children: itemCountLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dd", { children: node.itemCount })
+      ) }, child.id)) })
+    ] })
+  ] }) }) });
+  const itemCount = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("dl", { className: "gtv-info-panel-fields", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: itemCountLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { children: node.itemCount })
   ] });
-  const { primary, aside } = renderInfoPanelBody ? renderInfoPanelBody(node, { toolbar, ancestors, family, itemCount }) : { primary: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+  const { primary, aside } = renderInfoPanelBody ? renderInfoPanelBody(node, { toolbar, ancestors, family, itemCount }) : { primary: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     toolbar,
     ancestors,
     family,
     itemCount
   ] }) };
   const hasAside = aside !== void 0 && aside !== null && aside !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: `gtv-info-panel gtv-info-panel--${side}${expanded ? " gtv-info-panel--expanded" : ""}${expanded && !hasAside ? " gtv-info-panel--expanded-solo" : ""}${collapsed ? " gtv-info-panel--collapsed" : ""}`,
       ref: panelRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             className: "gtv-info-panel-header",
             style: { background: fill, color: textColor },
             children: [
-              onPrevious && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              onPrevious && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1638,21 +1694,21 @@ function InfoPanel({
                   onClick: onPrevious,
                   "aria-label": previousLabel ? `Previous: ${previousLabel}` : "Previous",
                   title: previousLabel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md4.MdArrowBack, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdArrowBack, { className: "gtv-icon", size: 16 })
                 }
               ),
-              editing && renderTitleEditor ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "gtv-info-panel-title gtv-info-panel-title--editor", children: renderTitleEditor(node) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "span",
                 {
                   className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`,
                   style: { color: textColor },
                   children: [
                     node.name,
-                    node.umbrella && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "gtv-info-panel-umbrella-badge", children: "umbrella" })
+                    node.umbrella && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "gtv-info-panel-umbrella-badge", children: "umbrella" })
                   ]
                 }
               ),
-              onZoomIn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              onZoomIn && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1661,22 +1717,11 @@ function InfoPanel({
                   onClick: onZoomIn,
                   "aria-label": "Zoom in",
                   title: "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md4.MdZoomIn, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdZoomIn, { className: "gtv-icon", size: 16 })
                 }
               ),
-              onEditModeChange && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-info-panel-edit",
-                  style: { color: textColor },
-                  onClick: () => onEditModeChange(!editMode),
-                  "aria-pressed": editMode,
-                  children: editMode ? "Done" : "Edit"
-                }
-              ),
-              onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
-              !hideClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange, style: { color: textColor } }),
+              !hideClose && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1684,18 +1729,18 @@ function InfoPanel({
                   style: { color: textColor },
                   onClick: onClose,
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md4.MdClose, { className: "gtv-icon", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-primary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-primary", children: [
             primary,
             expanded && !hasAside && dangerZone
           ] }),
-          hasAside && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "gtv-info-panel-aside", children: [
+          hasAside && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-info-panel-aside", children: [
             aside,
             expanded && dangerZone
           ] })
@@ -1708,8 +1753,8 @@ function InfoPanel({
 // src/OverlayPanel.tsx
 var import_react7 = require("react");
-var import_md5 = require("react-icons/md");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_md6 = require("react-icons/md");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function OverlayPanel({
   title,
   content,
@@ -1744,21 +1789,21 @@ function OverlayPanel({
     expanded && !extraContent && "gtv-info-panel--expanded-solo",
     collapsed && "gtv-info-panel--collapsed"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, ref: panelRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-info-panel-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
-      onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange }),
-      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md5.MdClose, { className: "gtv-icon", size: 16 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, ref: panelRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-info-panel-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `gtv-info-panel-title${hideTitle ? " gtv-info-panel-title--hidden" : ""}`, children: title }),
+      onExpandedChange && !hideExpandButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InfoPanelExpandButton, { expanded, onExpandedChange }),
+      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "gtv-info-panel-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md6.MdClose, { className: "gtv-icon", size: 16 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "gtv-info-panel-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
-      extraContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "gtv-info-panel-primary gtv-overlay-content", children: extraContent })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-info-panel-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-info-panel-aside gtv-overlay-content", children: content }),
+      extraContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-info-panel-primary gtv-overlay-content", children: extraContent })
     ] })
   ] });
 }
 // src/GenreTree.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function GenreTree({
   nodes,
   className,
@@ -1786,10 +1831,6 @@ function GenreTree({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -1799,7 +1840,9 @@ function GenreTree({
   wheelZoom,
   defaultViewport,
   onViewportChange,
-  controlsOrientation = "vertical"
+  controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy
 }) {
   const index = useTreeIndex(nodes);
   const svgRef = (0, import_react8.useRef)(null);
@@ -1955,7 +1998,7 @@ function GenreTree({
     hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
-  const svg = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const svg = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       ref: svgRef,
@@ -1965,13 +2008,14 @@ function GenreTree({
     }
   );
   if (!interactive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, children: svg });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: svg });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref: viewportRef,
       className,
+      "aria-busy": busy,
       style: {
         position: "relative",
         overflow: "hidden",
@@ -1994,7 +2038,7 @@ function GenreTree({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             ref: stageRef,
@@ -2008,7 +2052,7 @@ function GenreTree({
             children: svg
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -2058,10 +2102,6 @@ function GenreTree({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -2080,54 +2120,15 @@ function GenreTree({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomIn && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomIn,
-                  onClick: panZoom.zoomIn,
-                  "aria-label": "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md6.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomOut && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomOut,
-                  onClick: panZoom.zoomOut,
-                  "aria-label": "Zoom out",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md6.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current)),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md6.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame(queryTreeContentElements(svgRef.current))
           }
         )
       ]
@@ -2137,7 +2138,6 @@ function GenreTree({
 // src/GenreTreeWheelBase.tsx
 var import_react9 = require("react");
-var import_md7 = require("react-icons/md");
 var d32 = __toESM(require("d3"), 1);
 // src/root-grouping.ts
@@ -2213,7 +2213,7 @@ function computeRotationForSelection(currentRotationDeg, targetAngle, landingAng
 }
 // src/GenreTreeWheelBase.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function WheelCore({
   nodes,
   className,
@@ -2239,10 +2239,6 @@ function WheelCore({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -2253,6 +2249,8 @@ function WheelCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy,
   selectedNodeId
 }) {
   const treeOrientation = direction === "left" ? "horizontal-anchored" : "vertical";
@@ -2368,10 +2366,11 @@ function WheelCore({
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, effectiveRootId, nodes, panel, showNodeInfo]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         direction === "left" && "gtv-wheel-container--left",
@@ -2386,7 +2385,7 @@ function WheelCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             ref: stageRef,
@@ -2399,7 +2398,7 @@ function WheelCore({
               transform: panZoom.transform,
               transformOrigin: "0 0"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
                 className: "gtv-wheel-stage",
@@ -2407,7 +2406,7 @@ function WheelCore({
                   [chipHalfExtentVar]: `${rootChipHalfExtent}px`
                 },
                 children: [
-                  selectedGroup && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-tree-anchor", ref: treeAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  selectedGroup && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-tree-anchor", ref: treeAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     GenreTree,
                     {
                       nodes: selectedGroup.nodes,
@@ -2445,9 +2444,9 @@ function WheelCore({
                     },
                     selectedGroup.root.id
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-                  centerLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+                  centerLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       className: "gtv-wheel",
@@ -2455,7 +2454,7 @@ function WheelCore({
                         "--gtv-wheel-rotation": `${rotationDeg}deg`
                       },
                       children: [
-                        sectorFillGradient && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        sectorFillGradient && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "div",
                           {
                             className: "gtv-wheel-sector-fill",
@@ -2464,7 +2463,7 @@ function WheelCore({
                             }
                           }
                         ),
-                        groups.length > 1 && groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        groups.length > 1 && groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "div",
                           {
                             className: "gtv-wheel-divider",
@@ -2487,12 +2486,12 @@ function WheelCore({
                             rootItemCount,
                             rootItemCountRange
                           );
-                          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "div",
                             {
                               className: "gtv-wheel-slot",
                               style: { "--gtv-chip-angle": `${angle}deg` },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                                 "button",
                                 {
                                   type: "button",
@@ -2528,8 +2527,8 @@ function WheelCore({
                                     }
                                   },
                                   children: [
-                                    PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "gtv-wheel-chip-dot" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                    PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "gtv-wheel-chip-dot" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                       "span",
                                       {
                                         className: "gtv-node-label gtv-node-label--root",
@@ -2552,7 +2551,7 @@ function WheelCore({
             )
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -2599,10 +2598,6 @@ function WheelCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -2621,57 +2616,18 @@ function WheelCore({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomIn && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomIn,
-                  onClick: panZoom.zoomIn,
-                  "aria-label": "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md7.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomOut && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomOut,
-                  onClick: panZoom.zoomOut,
-                  "aria-label": "Zoom out",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md7.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([
-                    wheelCircleRef.current,
-                    ...queryTreeContentElements(treeAnchorRef.current)
-                  ]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_md7.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([
+              wheelCircleRef.current,
+              ...queryTreeContentElements(treeAnchorRef.current)
+            ])
           }
         )
       ]
@@ -2680,20 +2636,19 @@ function WheelCore({
 }
 // src/GenreTreeWheel.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function GenreTreeWheel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WheelCore, { ...props, direction: "bottom" });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WheelCore, { ...props, direction: "bottom" });
 }
 // src/GenreTreeWheelRight.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function GenreTreeWheelRight(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WheelCore, { ...props, direction: "left" });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WheelCore, { ...props, direction: "left" });
 }
 // src/GenreTreeWheelRadialBase.tsx
 var import_react10 = require("react");
-var import_md8 = require("react-icons/md");
 var d33 = __toESM(require("d3"), 1);
 // src/defer-click.ts
@@ -2877,6 +2832,7 @@ function pickEmptyLabelSpot(area, width, height, obstacles, prefer = () => true)
 var POP_WEDGE_SPAN_DEGREES = 80;
 var POP_SUBTREE_OUTER_MARGIN = 24;
 var POP_HIERARCHY_ROOT_ABSOLUTE_DEPTH = 1;
+var DOT_RADIUS_TRANSITION_MS = 250;
 function getRadialDepthRadius(depth, coreRootCircleRadius, depthSpacing) {
   return coreRootCircleRadius + depth * depthSpacing;
 }
@@ -2899,14 +2855,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;
@@ -2916,15 +2871,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 = [];
@@ -2956,7 +2911,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);
   });
@@ -2966,13 +2921,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);
@@ -3059,7 +3045,8 @@ function renderPopSubtree(d3Lib, svg, hierarchy, rootColor, reparentingNodeId, r
     rootLinkOrigin,
     isMainstreamSector = false,
     selectedNodeId = null,
-    nodeFillOf
+    nodeFillOf,
+    dotRadiusMemory
   } = options;
   const { onReparentTargetSelect, onNodeClick, onNodeDoubleClick, onNodeHover } = callbacks;
   const isForbidden = (d) => reparentForbiddenIds.includes(d.data.id);
@@ -3122,13 +3109,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"
@@ -3251,14 +3243,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) {
@@ -3298,7 +3290,7 @@ function splitRootGroupBySide(group) {
 }
 // src/GenreTreeWheelRadialBase.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var LANDING_ANGLE = 90;
 function computeContinuousAngles(groups, layout, previous) {
   const angles = /* @__PURE__ */ new Map();
@@ -3333,10 +3325,6 @@ function WheelRadialCore({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -3347,6 +3335,8 @@ function WheelRadialCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy,
   selectedNodeId
 }) {
   const index = useTreeIndex(nodes);
@@ -3505,8 +3495,7 @@ function WheelRadialCore({
           angle,
           span,
           wheelRadius,
-          POP_TREE_DEPTH_RADIAL_SPACING,
-          wheelItemCountRange
+          POP_TREE_DEPTH_RADIAL_SPACING
         );
         const reparentForbiddenIds = reparentingNodeId ? laidOut.descendants().find((d) => d.data.id === reparentingNodeId)?.descendants().map((d) => d.data.id) ?? [] : [];
         const branchGroup = sectorGroup.append("g").attr("class", "gtv-wheel-core-branch").attr("data-gtv-branch-index", branchIndex);
@@ -3622,10 +3611,11 @@ function WheelRadialCore({
       };
     });
   }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         "gtv-wheel-container--radial",
@@ -3639,7 +3629,7 @@ function WheelRadialCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             ref: stageRef,
@@ -3652,9 +3642,9 @@ function WheelRadialCore({
               transform: panZoom.transform,
               transformOrigin: "0 0"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "gtv-wheel-stage", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel", children: sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gtv-wheel-stage", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel", children: sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   className: "gtv-wheel-sector",
@@ -3666,7 +3656,7 @@ function WheelRadialCore({
                 },
                 `sector-${sector.rootId}`
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "svg",
                 {
                   ref: coreSvgRef,
@@ -3675,9 +3665,9 @@ function WheelRadialCore({
                   height: wheelRadius * 2
                 }
               ),
-              centerLabel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "gtv-wheel", children: [
-                dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              centerLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel-center-label", children: centerLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gtv-wheel", children: [
+                dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     className: "gtv-wheel-divider",
@@ -3700,12 +3690,12 @@ function WheelRadialCore({
                     rootItemCount,
                     rootItemCountRange
                   );
-                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-slot",
                       style: { "--gtv-chip-angle": `${angle}deg` },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -3738,8 +3728,8 @@ function WheelRadialCore({
                             }
                           },
                           children: [
-                            PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "gtv-wheel-chip-dot" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            PER_TREE_ACCENT_DOT && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "gtv-wheel-chip-dot" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "span",
                               {
                                 className: "gtv-node-label gtv-node-label--root",
@@ -3758,7 +3748,7 @@ function WheelRadialCore({
             ] })
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -3804,10 +3794,6 @@ function WheelRadialCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -3826,54 +3812,15 @@ function WheelRadialCore({
             } : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(OverlayPanel, { ...overlayPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "div",
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayPanel, { ...overlayPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomIn && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomIn,
-                  onClick: panZoom.zoomIn,
-                  "aria-label": "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_md8.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomOut && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomOut,
-                  onClick: panZoom.zoomOut,
-                  "aria-label": "Zoom out",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_md8.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_md8.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([wheelCircleRef.current, coreSvgRef.current])
           }
         )
       ]
@@ -3882,14 +3829,13 @@ function WheelRadialCore({
 }
 // src/GenreTreeWheelRadial.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function GenreTreeWheelRadial(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WheelRadialCore, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(WheelRadialCore, { ...props });
 }
 // src/GenreTreeWheelRadialPopCoreBase.tsx
 var import_react13 = require("react");
-var import_md10 = require("react-icons/md");
 var d34 = __toESM(require("d3"), 1);
 // src/use-focus-history.ts
@@ -3918,17 +3864,17 @@ function useFocusHistory(focusNodeId, isFocusable) {
 // src/WheelBreadcrumb.tsx
 var import_react12 = require("react");
-var import_md9 = require("react-icons/md");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_md7 = require("react-icons/md");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MAX_VISIBLE_ANCESTORS = 3;
 var ANCESTORS_KEPT_WHEN_COLLAPSED = 2;
 function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
   const [expanded, setExpanded] = (0, import_react12.useState)(false);
   const collapsed = !expanded && ancestors.length > MAX_VISIBLE_ANCESTORS;
   const visibleAncestors = collapsed ? ancestors.slice(-ANCESTORS_KEPT_WHEN_COLLAPSED) : ancestors;
-  const separator = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", children: "\u203A" });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("nav", { className: "gtv-wheel-breadcrumb", "aria-label": "Breadcrumb", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const separator = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u203A" });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("nav", { className: "gtv-wheel-breadcrumb", "aria-label": "Breadcrumb", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -3936,12 +3882,12 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
         "aria-label": "All genres",
         title: "All genres",
         onClick: onHome,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_md9.MdHome, { className: "gtv-icon", size: 14 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md7.MdHome, { className: "gtv-icon", size: 14 })
       }
     ),
     separator,
-    collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    collapsed && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -3954,11 +3900,11 @@ function WheelBreadcrumb({ ancestors, currentName, onHome, onAncestor }) {
       ),
       separator
     ] }),
-    visibleAncestors.map((ancestor) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "gtv-wheel-breadcrumb-crumb", onClick: () => onAncestor(ancestor.id), children: ancestor.name }),
+    visibleAncestors.map((ancestor) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "gtv-wheel-breadcrumb-crumb", onClick: () => onAncestor(ancestor.id), children: ancestor.name }),
       separator
     ] }, ancestor.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "gtv-wheel-breadcrumb-current", "aria-current": "page", children: currentName })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gtv-wheel-breadcrumb-current", "aria-current": "page", children: currentName })
   ] });
 }
@@ -4019,7 +3965,7 @@ function resolvePopCoreFrame(nodes, focusNodeId) {
 }
 // src/GenreTreeWheelRadialPopCoreBase.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var LANDING_ANGLE2 = 90;
 var CHIP_GAP = 16;
 var sum = (values) => values.reduce((total, value) => total + value, 0);
@@ -4056,10 +4002,6 @@ function WheelRadialPopCoreCore({
   hideInfoPanelTitle = false,
   itemCountLabel,
   readOnly,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -4070,6 +4012,8 @@ function WheelRadialPopCoreCore({
   defaultViewport,
   onViewportChange,
   controlsOrientation = "vertical",
+  floatingControlsLeading,
+  busy,
   allowWheelRotation = true,
   selectedNodeId,
   focusNodeId: requestedFocusNodeId = null,
@@ -4142,6 +4086,7 @@ function WheelRadialPopCoreCore({
   }
   const viewportRef = (0, import_react13.useRef)(null);
   const stageRef = (0, import_react13.useRef)(null);
+  const dotRadiusMemoryRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
   const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
   const { panel: openPanel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const isInFrame = (id) => id === focusNodeId || centerSubtreeNodeIds.has(id) || ringRootById.has(id);
@@ -4248,8 +4193,8 @@ function WheelRadialPopCoreCore({
       centerSubtreeHierarchy,
       0,
       POP_TREE_DEPTH_RADIAL_SPACING
-    ) : centerChipDiameter / 2,
-    [centerSubtreeHierarchy, centerChipDiameter]
+    ) : NODE_LAYOUT_SLOT_RADIUS,
+    [centerSubtreeHierarchy]
   );
   const maxCoreExtentDelta = (0, import_react13.useMemo)(() => {
     let extent = 0;
@@ -4257,11 +4202,7 @@ function WheelRadialPopCoreCore({
       core.forEach((hierarchy) => {
         extent = Math.max(
           extent,
-          calculateCoreSubtreeRadialExtent(
-            hierarchy,
-            POP_TREE_DEPTH_RADIAL_SPACING,
-            0
-          )
+          calculateCoreSubtreeRadialExtent(hierarchy, POP_TREE_DEPTH_RADIAL_SPACING, 0)
         );
       });
     });
@@ -4275,7 +4216,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,
           {
@@ -4283,16 +4224,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))
@@ -4300,7 +4239,7 @@ function WheelRadialPopCoreCore({
         ];
       })
     ),
-    [groups, branchHierarchiesByRootId, rootItemCountById, wheelItemCountRange]
+    [groups, branchHierarchiesByRootId]
   );
   const coreRootCircleRadius = (0, import_react13.useMemo)(
     () => solveRingRadius(
@@ -4418,8 +4357,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);
@@ -4463,6 +4401,7 @@ function WheelRadialPopCoreCore({
           {
             rootLinkOrigin,
             selectedNodeId: panel?.node.id ?? null,
+            dotRadiusMemory: dotRadiusMemoryRef.current,
             nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
           }
         );
@@ -4475,16 +4414,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,
@@ -4527,7 +4492,11 @@ function WheelRadialPopCoreCore({
             isCoreSector: true,
             rootLinkOrigin,
             selectedNodeId: panel?.node.id ?? null,
-            nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
+            dotRadiusMemory: dotRadiusMemoryRef.current,
+            nodeFillOf: (node) => {
+              const fill = getGenreNodeStyle(index, node.id).fill;
+              return undergroundIds.has(node.id) ? shadeSurface(fill, UNDERGROUND_DARKEN_RATIO) : fill;
+            }
           }
         );
       });
@@ -4582,6 +4551,7 @@ function WheelRadialPopCoreCore({
           skipRootNode: true,
           isMainstreamSector: isCenterMainstream,
           selectedNodeId: panel?.node.id ?? null,
+          dotRadiusMemory: dotRadiusMemoryRef.current,
           nodeFillOf: (node) => getGenreNodeStyle(index, node.id).fill
         }
       );
@@ -4777,10 +4747,11 @@ function WheelRadialPopCoreCore({
       };
     });
   }, [groups, continuousAngleByRootId, sectorSpanByRootId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       ref: viewportRef,
+      "aria-busy": busy,
       className: [
         "gtv-wheel-container",
         "gtv-wheel-container--radial",
@@ -4795,7 +4766,7 @@ function WheelRadialPopCoreCore({
       },
       onPointerDown: panZoom.handlePointerDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             ref: stageRef,
@@ -4809,9 +4780,9 @@ function WheelRadialPopCoreCore({
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-wheel-stage", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
-                isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-wheel-stage", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-circle", ref: wheelCircleRef }),
+                isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "div",
                   {
                     className: "gtv-wheel-middle-circle",
@@ -4820,8 +4791,8 @@ function WheelRadialPopCoreCore({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-wheel", children: [
-                  sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-wheel", children: [
+                  sectorFills.map((sector) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-sector",
@@ -4833,8 +4804,8 @@ function WheelRadialPopCoreCore({
                     },
                     `sector-${sector.rootId}`
                   )),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-inner-tint" }),
-                  isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-inner-tint" }),
+                  isPopExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-middle-tint",
@@ -4844,7 +4815,7 @@ function WheelRadialPopCoreCore({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "svg",
                   {
                     ref: popSvgRef,
@@ -4853,7 +4824,7 @@ function WheelRadialPopCoreCore({
                     height: svgCanvasRadius * 2
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-center-node", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-center-node", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     ref: centerChipRef,
@@ -4891,8 +4862,8 @@ function WheelRadialPopCoreCore({
                     "aria-label": centerNode.name
                   }
                 ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-wheel", children: [
-                  dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-wheel", children: [
+                  dividerAngles.map((angle, index2) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "gtv-wheel-divider",
@@ -4911,12 +4882,12 @@ function WheelRadialPopCoreCore({
                       group.root.id
                     );
                     const diameter = 2 * calculateNodeDotRadius(rootItemCount, wheelItemCountRange);
-                    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "div",
                       {
                         className: "gtv-wheel-slot",
                         style: { "--gtv-chip-angle": `${angle}deg` },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-wheel-chip-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                           "button",
                           {
                             type: "button",
@@ -4958,7 +4929,7 @@ function WheelRadialPopCoreCore({
                   })
                 ] })
               ] }),
-              regionLabel && index.byId.has(regionLabel.rootId) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              regionLabel && index.byId.has(regionLabel.rootId) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   ref: regionLabelRef,
@@ -4976,7 +4947,7 @@ function WheelRadialPopCoreCore({
             ]
           }
         ),
-        panel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        panel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           InfoPanel,
           {
             node: panel.node,
@@ -5003,10 +4974,6 @@ function WheelRadialPopCoreCore({
             hideTitle: hideInfoPanelTitle,
             itemCountLabel,
             readOnly,
-            editMode,
-            onEditModeChange,
-            renderTitleEditor,
-            renderParentsEditor,
             renderDangerZone,
             expanded,
             onExpandedChange,
@@ -5026,8 +4993,8 @@ function WheelRadialPopCoreCore({
             onZoomIn: onFocusChange && panel.node.id !== focusNodeId && isZoomableNode(nodes, panel.node.id) ? () => onFocusChange(panel.node.id, "zoom-in") : void 0
           }
         ),
-        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OverlayPanel, { ...overlayPanel }),
-        onFocusChange && focusNodeId !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OverlayPanel, { ...overlayPanel }),
+        onFocusChange && focusNodeId !== null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           WheelBreadcrumb,
           {
             ancestors: index.ancestorsOf(focusNodeId).filter((ancestor) => isZoomableNode(nodes, ancestor.id)),
@@ -5043,56 +5010,17 @@ function WheelRadialPopCoreCore({
           },
           focusNodeId
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          FloatingControls,
           {
-            className: [
-              "gtv-wheel-floating-controls",
-              controlsOrientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-            ].filter(Boolean).join(" "),
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-zoom-controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomIn && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomIn,
-                  onClick: panZoom.zoomIn,
-                  "aria-label": "Zoom in",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_md10.MdZoomIn, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: [
-                    "gtv-zoom-btn",
-                    !panZoom.canZoomOut && "gtv-zoom-btn--disabled"
-                  ].filter(Boolean).join(" "),
-                  disabled: !panZoom.canZoomOut,
-                  onClick: panZoom.zoomOut,
-                  "aria-label": "Zoom out",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_md10.MdZoomOut, { className: "gtv-icon", size: 18 })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gtv-zoom-btn",
-                  onClick: () => panZoom.fitToFrame([
-                    wheelCircleRef.current,
-                    ...queryTreeContentElements(popSvgRef.current)
-                  ]),
-                  "aria-label": "Fit to frame",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_md10.MdFitScreen, { className: "gtv-icon", size: 18 })
-                }
-              )
-            ] })
+            panZoom,
+            orientation: controlsOrientation,
+            leading: floatingControlsLeading,
+            busy,
+            onFit: () => panZoom.fitToFrame([
+              wheelCircleRef.current,
+              ...queryTreeContentElements(popSvgRef.current)
+            ])
           }
         )
       ]
@@ -5101,14 +5029,14 @@ function WheelRadialPopCoreCore({
 }
 // src/GenreTreeWheelRadialPopCore.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function GenreTreeWheelRadialPopCore(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WheelRadialPopCoreCore, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(WheelRadialPopCoreCore, { ...props });
 }
 // src/GenreTreeOutline.tsx
 var import_react14 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function createOutlineStore(initial) {
   let state = initial;
   const listeners = /* @__PURE__ */ new Set();
@@ -5182,9 +5110,9 @@ function OutlineNodeView({
   const { itemCount } = node;
   const children = model.index.childrenByParentId.get(nodeId) ?? [];
   const split = isRoot ? model.ringSplitById.get(nodeId) : void 0;
-  const row = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: ["gtv-outline-row", isSelected && "gtv-outline-row--selected"].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gtv-outline-dot", style: { background: model.styleOf(node).fill } }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const row = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: ["gtv-outline-row", isSelected && "gtv-outline-row--selected"].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-outline-dot", style: { background: model.styleOf(node).fill } }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
@@ -5201,16 +5129,16 @@ function OutlineNodeView({
         children: node.name
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gtv-outline-count", children: itemCount })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-outline-count", children: itemCount })
   ] });
   const itemProps = { model, store, callbacks };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: "gtv-outline-item", "data-gtv-node-id": nodeId, children: children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { open: isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(nodeId)), children: row }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list", children: split ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineSection, { rootId: nodeId, kind: "core", branches: split.coreBranches, ...itemProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineSection, { rootId: nodeId, kind: "pop", branches: split.popBranches, ...itemProps })
-    ] }) : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, ...itemProps }, child.id)) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gtv-outline-leaf", children: row }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: "gtv-outline-item", "data-gtv-node-id": nodeId, children: children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("details", { open: isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(nodeId)), children: row }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list", children: split ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineSection, { rootId: nodeId, kind: "core", branches: split.coreBranches, ...itemProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineSection, { rootId: nodeId, kind: "pop", branches: split.popBranches, ...itemProps })
+    ] }) : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, ...itemProps }, child.id)) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "gtv-outline-leaf", children: row }) });
 }
 var OutlineNode = (0, import_react14.memo)(OutlineNodeView);
 var OutlineSection = (0, import_react14.memo)(function OutlineSection2({
@@ -5224,9 +5152,9 @@ var OutlineSection = (0, import_react14.memo)(function OutlineSection2({
   const key = sectionKey(kind, rootId);
   const isOpen = useOutlineState(store, (s) => s.openIds.has(key));
   if (branches.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: "gtv-outline-item", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { open: isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(key)), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "gtv-outline-section-label", children: kind === "core" ? "Core" : "Pop" }) }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list", children: branches.map(({ child }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, model, store, callbacks }, child.id)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: "gtv-outline-item", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("details", { open: isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("summary", { onClick: (event) => handleSummaryClick(event, () => callbacks.toggleOpen(key)), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-outline-section-label", children: kind === "core" ? "Core" : "Pop" }) }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list", children: branches.map(({ child }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: child.id, isRoot: false, model, store, callbacks }, child.id)) })
   ] }) });
 });
 function GenreTreeOutline(props) {
@@ -5243,10 +5171,6 @@ function GenreTreeOutline(props) {
     hideInfoPanelTitle = false,
     itemCountLabel,
     readOnly,
-    editMode,
-    onEditModeChange,
-    renderTitleEditor,
-    renderParentsEditor,
     renderDangerZone,
     expanded,
     onExpandedChange,
@@ -5347,12 +5271,12 @@ function GenreTreeOutline(props) {
   }, [selectedNodeId, store]);
   const selectedNode = selectedId === null ? void 0 : index.byId.get(selectedId);
   const itemProps = { model, store, callbacks };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: ["gtv-outline", selectedNode && "gtv-outline--panel-open", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gtv-outline-scroll", ref: scrollRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots", children: [model.centerRoot, ...model.ringRoots].map((root) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) }),
-      model.detachedRoots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots gtv-outline-list--detached", children: model.detachedRoots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: ["gtv-outline", selectedNode && "gtv-outline--panel-open", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gtv-outline-scroll", ref: scrollRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots", children: [model.centerRoot, ...model.ringRoots].map((root) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) }),
+      model.detachedRoots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "gtv-outline-list gtv-outline-list--roots gtv-outline-list--detached", children: model.detachedRoots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OutlineNode, { nodeId: root.id, isRoot: true, ...itemProps }, root.id)) })
     ] }),
-    selectedNode && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    selectedNode && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       InfoPanel,
       {
         node: selectedNode,
@@ -5373,10 +5297,6 @@ function GenreTreeOutline(props) {
         hideTitle: hideInfoPanelTitle,
         itemCountLabel,
         readOnly,
-        editMode,
-        onEditModeChange,
-        renderTitleEditor,
-        renderParentsEditor,
         renderDangerZone,
         expanded,
         onExpandedChange,
@@ -5395,13 +5315,13 @@ function GenreTreeOutline(props) {
         } : void 0
       }
     ),
-    overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OverlayPanel, { ...overlayPanel })
+    overlayPanel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OverlayPanel, { ...overlayPanel })
   ] });
 }
 // src/GenreTreeSkeleton.tsx
 var import_react15 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var CARD_FILL = "#F4F4F5";
 var CARD_BORDER_COLOR = "#E4E4E7";
 var CONNECTOR_COLOR2 = "#D4D4D8";
@@ -5506,8 +5426,8 @@ function SkeletonCard({
   card,
   rootAccent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "rect",
       {
         x: card.x,
@@ -5521,7 +5441,7 @@ function SkeletonCard({
         strokeWidth: rootAccent ? 1.5 : 1
       }
     ),
-    rootAccent && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    rootAccent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "circle",
       {
         cx: card.x + 18,
@@ -5539,9 +5459,9 @@ function GenreTreeSkeleton() {
   const animationName = `genre-tree-skeleton-sweep-${uid}`;
   const shimmerBandClass = `genre-tree-skeleton-shimmer-band-${uid}`;
   const sweepDistance = VIEWBOX_WIDTH + SHIMMER_BAND_WIDTH;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "gtv-skeleton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "gtv-skeleton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "svg",
       {
         viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
@@ -5550,7 +5470,7 @@ function GenreTreeSkeleton() {
         className: "gtv-skeleton-svg",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: `
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { children: `
           @keyframes ${animationName} {
             from { transform: translateX(0); }
             to { transform: translateX(${sweepDistance}px); }
@@ -5564,9 +5484,9 @@ function GenreTreeSkeleton() {
             }
           }
         ` }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "0%",
@@ -5574,7 +5494,7 @@ function GenreTreeSkeleton() {
                   stopOpacity: 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "50%",
@@ -5582,7 +5502,7 @@ function GenreTreeSkeleton() {
                   stopOpacity: 0.9
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -5591,8 +5511,8 @@ function GenreTreeSkeleton() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("mask", { id: maskId, children: [
-              ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mask", { id: maskId, children: [
+              ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "path",
                 {
                   d: connectorPath(link.from, link.to),
@@ -5602,7 +5522,7 @@ function GenreTreeSkeleton() {
                 },
                 `link-mask-${i}`
               )),
-              ALL_CARDS.map(({ card }, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              ALL_CARDS.map(({ card }, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "rect",
                 {
                   x: card.x,
@@ -5617,7 +5537,7 @@ function GenreTreeSkeleton() {
               ))
             ] })
           ] }),
-          ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ALL_LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "path",
             {
               d: connectorPath(link.from, link.to),
@@ -5627,8 +5547,8 @@ function GenreTreeSkeleton() {
             },
             `link-${i}`
           )),
-          ALL_CARDS.map(({ card, rootAccent }, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SkeletonCard, { card, rootAccent }, `card-${i}`)),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ALL_CARDS.map(({ card, rootAccent }, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SkeletonCard, { card, rootAccent }, `card-${i}`)),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "rect",
             {
               className: shimmerBandClass,
@@ -5647,7 +5567,7 @@ function GenreTreeSkeleton() {
 // src/GenreTreeWheelSkeleton.tsx
 var import_react16 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SHAPE_COLOR = "#D4D4D8";
 var SECTOR_FILL_OPACITY = 0.22;
 var INNER_TINT_OPACITY = 0.55;
@@ -5792,8 +5712,8 @@ function GenreTreeWheelSkeleton() {
     sharedStartTime ??= animation.startTime ?? document.timeline.currentTime;
     animation.startTime = sharedStartTime;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gtv-wheel-skeleton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "gtv-wheel-skeleton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: "gtv-wheel-skeleton-sector-layer",
@@ -5801,8 +5721,8 @@ function GenreTreeWheelSkeleton() {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "svg",
       {
         viewBox: `${CANVAS_ORIGIN} ${CANVAS_ORIGIN} ${CANVAS_SIZE} ${CANVAS_SIZE}`,
@@ -5810,14 +5730,14 @@ function GenreTreeWheelSkeleton() {
         className: "gtv-wheel-skeleton-svg",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("radialGradient", { id: mainstreamId, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("stop", { offset: "0%", stopColor: "#FFFFFF", stopOpacity: 0.45 }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("stop", { offset: "65%", stopColor: "#FFFFFF", stopOpacity: 0.15 }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: 0 })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("radialGradient", { id: mainstreamId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: "0%", stopColor: "#FFFFFF", stopOpacity: 0.45 }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: "65%", stopColor: "#FFFFFF", stopOpacity: 0.15 }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: 0 })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { id: shapesId, children: [
-              LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { id: shapesId, children: [
+              LINKS.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "path",
                 {
                   d: link.d,
@@ -5829,21 +5749,21 @@ function GenreTreeWheelSkeleton() {
                 },
                 `link-${i}`
               )),
-              DOTS.map((dot, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: dot.point.x, cy: dot.point.y, r: dot.r, fill: "currentColor" }, `dot-${i}`))
+              DOTS.map((dot, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: dot.point.x, cy: dot.point.y, r: dot.r, fill: "currentColor" }, `dot-${i}`))
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: 0, cy: 0, r: RING_RADIUS, fill: "#FFFFFF", fillOpacity: INNER_TINT_OPACITY }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: 0, cy: 0, r: MAINSTREAM_RADIUS, fill: `url(#${mainstreamId})` }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("use", { href: `#${shapesId}`, color: SHAPE_COLOR })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: 0, cy: 0, r: RING_RADIUS, fill: "#FFFFFF", fillOpacity: INNER_TINT_OPACITY }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: 0, cy: 0, r: MAINSTREAM_RADIUS, fill: `url(#${mainstreamId})` }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("use", { href: `#${shapesId}`, color: SHAPE_COLOR })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "gtv-wheel-skeleton-shimmer", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: wedgeRef, className: "gtv-wheel-skeleton-shimmer-wedge" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "gtv-wheel-skeleton-shimmer", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: wedgeRef, className: "gtv-wheel-skeleton-shimmer-wedge" }) })
   ] });
 }
 // src/GenreTreeOutlineSkeleton.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ROWS = [
   { depth: 0, width: 38 },
   { depth: 0, width: 26 },
@@ -5855,9 +5775,9 @@ var ROWS = [
   { depth: 0, width: 22 }
 ];
 function GenreTreeOutlineSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "gtv-skeleton gtv-outline-skeleton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
-    ROWS.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "gtv-skeleton gtv-outline-skeleton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "gtv-skeleton-sr-only", children: "Loading genre tree\u2026" }),
+    ROWS.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: "gtv-outline-skeleton-row",
@@ -5870,13 +5790,13 @@ function GenreTreeOutlineSkeleton() {
 }
 // src/GenreTreeViewSkeleton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function GenreTreeViewSkeleton({ viewMode }) {
   if (viewMode === "wheel" || viewMode === "pop-core") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "gtv-view-skeleton-wheel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GenreTreeWheelSkeleton, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "gtv-view-skeleton-wheel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenreTreeWheelSkeleton, {}) });
   }
-  if (viewMode === "outline") return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GenreTreeOutlineSkeleton, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GenreTreeSkeleton, {});
+  if (viewMode === "outline") return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenreTreeOutlineSkeleton, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenreTreeSkeleton, {});
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {