@behindthemusictree/genre-tree-view 6.5.1 → 7.1.0

package/dist/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ACCENT_TEXT_COLOR: () => ACCENT_TEXT_COLOR,
   DEFAULT_FRAME_HEIGHT: () => DEFAULT_FRAME_HEIGHT,
   DEFAULT_FRAME_WIDTH: () => DEFAULT_FRAME_WIDTH,
   GenreTree: () => GenreTree,
@@ -42,9 +43,13 @@ __export(src_exports, {
   GenreTreeWheelRadialPopCore: () => GenreTreeWheelRadialPopCore,
   GenreTreeWheelRight: () => GenreTreeWheelRight,
   GenreTreeWheelSkeleton: () => GenreTreeWheelSkeleton,
+  InfoPanel: () => InfoPanel,
+  ROOT_TINT_RATIO: () => ROOT_TINT_RATIO,
+  TEXT_COLOR: () => TEXT_COLOR,
   getGenreTreeColor: () => getGenreTreeColor,
   groupNodesByRoot: () => groupNodesByRoot,
-  isZoomableNode: () => isZoomableNode
+  isZoomableNode: () => isZoomableNode,
+  tintSurface: () => tintSurface
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -57,6 +62,7 @@ var import_server = __toESM(require("react-dom/server"), 1);
 var import_pi = require("react-icons/pi");
 
 // src/constants.ts
+var import_ui = require("@behindthemusictree/ui");
 var import_d3 = require("d3");
 var SURFACE_BORDER_COLOR = "#E4E4E7";
 var CORNER_RADIUS = 8;
@@ -76,7 +82,6 @@ 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",
@@ -228,11 +233,7 @@ function getItemCountRange(nodes, options = {}) {
   };
 }
 function logarithmicPosition(itemCount, range) {
-  const { min, max } = range;
-  const logMin = Math.log1p(Math.max(min, 0));
-  const logMax = Math.log1p(Math.max(max, 0));
-  const logValue = Math.log1p(Math.max(itemCount, 0));
-  return logMax > logMin ? Math.max(0, Math.min(1, (logValue - logMin) / (logMax - logMin))) : 0;
+  return (0, import_ui.logScalePosition)(itemCount, range);
 }
 function calculateNodeDimensions(itemCount, range) {
   const t = logarithmicPosition(itemCount, range);
@@ -271,8 +272,11 @@ function calculateLabelRank(itemCount, range, depth) {
   return logarithmicPosition(itemCount, range) - Math.max(0, depth - 1) * LABEL_DEPTH_RANK_PENALTY;
 }
 function isLabelRankedForZoom(rank, zoomScale) {
-  const zoomOut = Math.log(ZOOM_FOCUS_SCALE / zoomScale) / Math.log(ZOOM_FOCUS_SCALE / ZOOM_MIN_SCALE);
-  return rank >= Math.min(1, zoomOut) * LABEL_MIN_RANK_AT_MIN_ZOOM;
+  return (0, import_ui.isRankShownAtZoom)(rank, zoomScale, {
+    minScale: ZOOM_MIN_SCALE,
+    focusScale: ZOOM_FOCUS_SCALE,
+    minRankAtMinZoom: LABEL_MIN_RANK_AT_MIN_ZOOM
+  });
 }
 function calculateRootLabelFontSize(layoutFontSize, zoomScale) {
   return Math.max(layoutFontSize, ROOT_LABEL_MIN_SCREEN_PX / zoomScale);
@@ -704,7 +708,7 @@ function renderTree(d3Lib, svgRef, treeData, svgWidth, svgHeight, reparentingNod
 }
 
 // src/FloatingControls.tsx
-var import_ui = require("@behindthemusictree/ui");
+var import_ui2 = require("@behindthemusictree/ui");
 
 // src/BusyIndicator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -717,32 +721,22 @@ function BusyIndicator() {
 
 // src/FloatingControls.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FloatingControls({ panZoom, onFit, orientation, zoomControls, leading, busy }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: [
-        "gtv-wheel-floating-controls",
-        orientation === "horizontal" && "gtv-wheel-floating-controls--horizontal"
-      ].filter(Boolean).join(" "),
-      children: [
-        busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BusyIndicator, {}),
-        leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gtv-floating-controls-leading", children: leading }),
-        zoomControls !== "never" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_ui.ZoomControls,
-          {
-            onZoomIn: panZoom.zoomIn,
-            onZoomOut: panZoom.zoomOut,
-            onFit,
-            canZoomIn: panZoom.canZoomIn,
-            canZoomOut: panZoom.canZoomOut,
-            orientation,
-            className: zoomControls === "auto" ? "gtv-zoom-controls gtv-zoom-controls--auto" : "gtv-zoom-controls"
-          }
-        )
-      ]
-    }
-  );
+function FloatingControls({ panZoom, onFit, zoomControls, leading, busy }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gtv-wheel-floating-controls", children: [
+    busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BusyIndicator, {}),
+    leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gtv-floating-controls-leading", children: leading }),
+    zoomControls !== "never" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_ui2.ZoomControls,
+      {
+        onZoomIn: panZoom.zoomIn,
+        onZoomOut: panZoom.zoomOut,
+        onFit,
+        canZoomIn: panZoom.canZoomIn,
+        canZoomOut: panZoom.canZoomOut,
+        className: zoomControls === "auto" ? "gtv-zoom-controls gtv-zoom-controls--auto" : "gtv-zoom-controls"
+      }
+    )
+  ] });
 }
 
 // src/use-pan-zoom.ts
@@ -900,8 +894,8 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     if (!viewport || !bounds) return pan;
     const origin = axis === "x" ? bounds.originX : bounds.originY;
     const size = axis === "x" ? bounds.width : bounds.height;
-    const viewportSize = axis === "x" ? viewport.clientWidth : viewport.clientHeight;
-    const panMax = viewportSize - PAN_MIN_VISIBLE_PX - origin * scale;
+    const viewportSize2 = axis === "x" ? viewport.clientWidth : viewport.clientHeight;
+    const panMax = viewportSize2 - PAN_MIN_VISIBLE_PX - origin * scale;
     const panMin = PAN_MIN_VISIBLE_PX - size * scale - origin * scale;
     const lo = Math.min(panMin, panMax);
     const hi = Math.max(panMin, panMax);
@@ -989,6 +983,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     [stepZoomAnimation]
   );
   const viewportSizeRef = (0, import_react.useRef)(null);
+  const [viewportSize, setViewportSize] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
@@ -1001,6 +996,9 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       const { width, height } = entry.contentRect;
       const previous = viewportSizeRef.current;
       viewportSizeRef.current = { width, height };
+      if (width > 0 && height > 0) {
+        setViewportSize((prev) => prev?.width === width && prev.height === height ? prev : { width, height });
+      }
       if (!previous || previous.width <= 0 || previous.height <= 0) {
         retryFrameRef.current();
         return;
@@ -1205,8 +1203,8 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     (element, targetScale, obscured, automatic = false) => {
       if (automatic && restoredRevisionRef.current !== void 0 && restoredFrameRef.current === options.frameKey && restoredSelectionRef.current === options.selectedNodeId) return;
       if (!automatic) operationRef.current += 1;
-      const viewportSize = viewportRef.current?.getBoundingClientRect();
-      if (automatic && (measuredFrameRef.current !== options.frameKey || fittedFrameRef.current === null || !viewportSize?.width || !viewportSize.height)) {
+      const viewportSize2 = viewportRef.current?.getBoundingClientRect();
+      if (automatic && (measuredFrameRef.current !== options.frameKey || fittedFrameRef.current === null || !viewportSize2?.width || !viewportSize2.height)) {
         const operation = operationRef.current;
         pendingCenterRef.current = () => {
           if (operation !== operationRef.current) return;
@@ -1407,6 +1405,8 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     panX,
     panY,
     zoomScale,
+    minScale,
+    viewportSize,
     transform: `translate(${panX}px, ${panY}px) scale(${zoomScale})`,
     canZoomIn: zoomScale < ZOOM_MAX_SCALE,
     canZoomOut: zoomScale > minScale,
@@ -2052,7 +2052,6 @@ function GenreTree({
   defaultViewport,
   viewportRestore,
   onViewportChange,
-  controlsOrientation = "vertical",
   showZoomControls = "auto",
   floatingControlsLeading,
   busy
@@ -2347,7 +2346,6 @@ function GenreTree({
           FloatingControls,
           {
             panZoom,
-            orientation: controlsOrientation,
             zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
@@ -2435,6 +2433,121 @@ function computeRotationForSelection(currentRotationDeg, targetAngle, landingAng
   return currentRotationDeg + shortestDelta;
 }
 
+// src/radial-wheel-geometry.ts
+function computeRadialLayout(weights, clickedIndex, landingAngle) {
+  const rootCount = weights.length;
+  if (rootCount <= 0) return [];
+  if (weights.some((weight) => weight <= 0)) {
+    throw new Error("computeRadialLayout: every root weight (node count) must be positive");
+  }
+  const total = weights.reduce((sum2, weight) => sum2 + weight, 0);
+  const orderedWidths = weights.map((_, i) => weights[(clickedIndex + i) % rootCount] / total * 360);
+  const slots = new Array(rootCount);
+  let boundary = landingAngle - orderedWidths[0] / 2;
+  for (let i = 0; i < rootCount; i++) {
+    const width = orderedWidths[i];
+    const rootIndex = (clickedIndex + i) % rootCount;
+    slots[rootIndex] = { rootIndex, angle: ((boundary + width / 2) % 360 + 360) % 360 };
+    boundary += width;
+  }
+  return slots;
+}
+function computeSectorWidths(weights) {
+  const total = weights.reduce((sum2, weight) => sum2 + weight, 0);
+  return weights.map((weight) => weight / total * 360);
+}
+function subdivideWedge(wedgeCenterDeg, wedgeSpanDeg, weights) {
+  if (weights.length <= 0) return [];
+  const total = weights.reduce((sum2, weight) => sum2 + weight, 0);
+  const spans = weights.map((weight) => weight / total * wedgeSpanDeg);
+  const slices = [];
+  let boundary = wedgeCenterDeg - wedgeSpanDeg / 2;
+  for (const spanDeg of spans) {
+    slices.push({ centerDeg: boundary + spanDeg / 2, spanDeg });
+    boundary += spanDeg;
+  }
+  return slices;
+}
+function coverageRadius(viewportWidth, viewportHeight, minScale, contentRadius) {
+  if (!(minScale > 0)) throw new Error("coverageRadius: minScale must be positive");
+  return Math.ceil(contentRadius * Math.SQRT2 + Math.hypot(viewportWidth, viewportHeight) / minScale);
+}
+function buildSectorClipPathPolygon(sweepDeg, stepDeg = 10) {
+  if (sweepDeg <= 0) return "";
+  const points = ["50% 50%"];
+  const steps = Math.max(1, Math.ceil(sweepDeg / stepDeg));
+  for (let i = 0; i <= steps; i++) {
+    const theta = Math.min(i * stepDeg, sweepDeg) * Math.PI / 180;
+    const x = 50 + 50 * Math.sin(theta);
+    const y = 50 - 50 * Math.cos(theta);
+    points.push(`${x}% ${y}%`);
+  }
+  return `polygon(${points.join(", ")})`;
+}
+function calculateWheelRadiusForAngles(angles, maxChipWidth, baseRadius) {
+  if (angles.length < 2) return baseRadius;
+  const sorted = [...angles].sort((a, b) => a - b);
+  let minGapDeg = 360;
+  for (let i = 0; i < sorted.length; i++) {
+    const next = i < sorted.length - 1 ? sorted[i + 1] : sorted[0] + 360;
+    minGapDeg = Math.min(minGapDeg, next - sorted[i]);
+  }
+  if (minGapDeg <= 0) return baseRadius;
+  const CHIP_GAP2 = 16;
+  const requiredRadius = (maxChipWidth + CHIP_GAP2) / (2 * Math.sin(minGapDeg * Math.PI / 360));
+  return Math.max(baseRadius, requiredRadius);
+}
+function solveRingRadius(angleNeededAt, floorRadius) {
+  const fits = (radius) => angleNeededAt(radius) <= 2 * Math.PI;
+  if (fits(floorRadius)) return floorRadius;
+  let lo = floorRadius;
+  let hi = floorRadius * 2;
+  while (!fits(hi)) {
+    lo = hi;
+    hi *= 2;
+  }
+  while (hi - lo > 1) {
+    const mid = (lo + hi) / 2;
+    if (fits(mid)) hi = mid;
+    else lo = mid;
+  }
+  return hi;
+}
+var boxesOverlap = (a, b) => a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1;
+function findSectorAtAngle(angle, sectors) {
+  const sector = sectors.find(
+    ({ center, span }) => Math.abs(((angle - center) % 360 + 540) % 360 - 180) <= span / 2
+  );
+  return sector?.id ?? null;
+}
+var boxGap = (a, b) => Math.hypot(Math.max(0, a.x0 - b.x1, b.x0 - a.x1), Math.max(0, a.y0 - b.y1, b.y0 - a.y1));
+function pickEmptyLabelSpot(area, width, height, obstacles, prefer = () => true) {
+  const STEPS = 9;
+  const spanX = area.x1 - area.x0 - width;
+  const spanY = area.y1 - area.y0 - height;
+  if (spanX < 0 || spanY < 0) return null;
+  const centerX = (area.x0 + area.x1) / 2;
+  const centerY = (area.y0 + area.y1) / 2;
+  let best = null;
+  for (let i = 0; i < STEPS; i++) {
+    for (let j = 0; j < STEPS; j++) {
+      const x = area.x0 + width / 2 + spanX * i / (STEPS - 1);
+      const y = area.y0 + height / 2 + spanY * j / (STEPS - 1);
+      const box = { x0: x - width / 2, x1: x + width / 2, y0: y - height / 2, y1: y + height / 2 };
+      if (obstacles.some((obstacle) => boxesOverlap(box, obstacle))) continue;
+      const gap = Math.min(height, ...obstacles.map((obstacle) => boxGap(box, obstacle)));
+      const score = [
+        prefer(x, y) ? 1 : 0,
+        gap,
+        -Math.hypot(x - centerX, y - centerY)
+      ];
+      const k = best ? score.findIndex((value, index) => value !== best.score[index]) : 0;
+      if (!best || k >= 0 && score[k] > best.score[k]) best = { x, y, score };
+    }
+  }
+  return best && { x: best.x, y: best.y };
+}
+
 // src/GenreTreeWheelBase.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function WheelCore({
@@ -2474,7 +2587,6 @@ function WheelCore({
   defaultViewport,
   viewportRestore,
   onViewportChange,
-  controlsOrientation = "vertical",
   showZoomControls = "auto",
   floatingControlsLeading,
   busy,
@@ -2516,6 +2628,8 @@ function WheelCore({
   const stageRef = (0, import_react9.useRef)(null);
   const viewportFrame = (0, import_react9.useMemo)(() => JSON.stringify(nodes.map(({ id, parentId, side }) => [id, parentId, side])), [nodes]);
   const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
+  const { viewportSize, minScale } = panZoom;
+  const wheelCoverageRadius = viewportSize ? coverageRadius(viewportSize.width, viewportSize.height, minScale, wheelRadius) : null;
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const wheelCircleRef = (0, import_react9.useRef)(null);
   const treeAnchorRef = (0, import_react9.useRef)(null);
@@ -2587,7 +2701,7 @@ function WheelCore({
   (0, import_react9.useEffect)(() => {
     if (!selectedNodeId || panel?.node.id === selectedNodeId) return;
     const targetNode = nodes.find((node) => node.id === selectedNodeId);
-    const element = treeAnchorRef.current?.querySelector(
+    const element = viewportRef.current?.querySelector(
       `#group-${CSS.escape(selectedNodeId)}`
     );
     if (!targetNode || !element) return;
@@ -2611,6 +2725,7 @@ function WheelCore({
       ].filter(Boolean).join(" "),
       style: {
         "--gtv-wheel-radius": `${wheelRadius}px`,
+        ...wheelCoverageRadius !== null && { "--gtv-wheel-coverage-radius": `${wheelCoverageRadius}px` },
         "--gtv-wheel-viewport-height": `${wheelViewportHeight}px`,
         "--gtv-wheel-rotation-transition-ms": `${WHEEL_ROTATION_TRANSITION_MS}ms`,
         "--gtv-wheel-rotation-easing": WHEEL_ROTATION_EASING,
@@ -2856,7 +2971,6 @@ function WheelCore({
           FloatingControls,
           {
             panZoom,
-            orientation: controlsOrientation,
             zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
@@ -2887,6 +3001,9 @@ function GenreTreeWheelRight(props) {
 var import_react10 = require("react");
 var d33 = __toESM(require("d3"), 1);
 
+// src/pop-core-radial-layout.ts
+var import_ui3 = require("@behindthemusictree/ui");
+
 // src/defer-click.ts
 function createDeferredClick() {
   let timeoutId = null;
@@ -2918,166 +3035,6 @@ function createDeferredClick() {
   return { schedule, cancel, doubleClick };
 }
 
-// src/radial-wheel-geometry.ts
-function computeRadialLayout(weights, clickedIndex, landingAngle) {
-  const rootCount = weights.length;
-  if (rootCount <= 0) return [];
-  if (weights.some((weight) => weight <= 0)) {
-    throw new Error("computeRadialLayout: every root weight (node count) must be positive");
-  }
-  const total = weights.reduce((sum2, weight) => sum2 + weight, 0);
-  const orderedWidths = weights.map((_, i) => weights[(clickedIndex + i) % rootCount] / total * 360);
-  const slots = new Array(rootCount);
-  let boundary = landingAngle - orderedWidths[0] / 2;
-  for (let i = 0; i < rootCount; i++) {
-    const width = orderedWidths[i];
-    const rootIndex = (clickedIndex + i) % rootCount;
-    slots[rootIndex] = { rootIndex, angle: ((boundary + width / 2) % 360 + 360) % 360 };
-    boundary += width;
-  }
-  return slots;
-}
-function computeSectorWidths(weights) {
-  const total = weights.reduce((sum2, weight) => sum2 + weight, 0);
-  return weights.map((weight) => weight / total * 360);
-}
-function subdivideWedge(wedgeCenterDeg, wedgeSpanDeg, weights) {
-  if (weights.length <= 0) return [];
-  const total = weights.reduce((sum2, weight) => sum2 + weight, 0);
-  const spans = weights.map((weight) => weight / total * wedgeSpanDeg);
-  const slices = [];
-  let boundary = wedgeCenterDeg - wedgeSpanDeg / 2;
-  for (const spanDeg of spans) {
-    slices.push({ centerDeg: boundary + spanDeg / 2, spanDeg });
-    boundary += spanDeg;
-  }
-  return slices;
-}
-function buildSectorClipPathPolygon(sweepDeg, stepDeg = 10) {
-  if (sweepDeg <= 0) return "";
-  const points = ["50% 50%"];
-  const steps = Math.max(1, Math.ceil(sweepDeg / stepDeg));
-  for (let i = 0; i <= steps; i++) {
-    const theta = Math.min(i * stepDeg, sweepDeg) * Math.PI / 180;
-    const x = 50 + 50 * Math.sin(theta);
-    const y = 50 - 50 * Math.cos(theta);
-    points.push(`${x}% ${y}%`);
-  }
-  return `polygon(${points.join(", ")})`;
-}
-function calculateWheelRadiusForAngles(angles, maxChipWidth, baseRadius) {
-  if (angles.length < 2) return baseRadius;
-  const sorted = [...angles].sort((a, b) => a - b);
-  let minGapDeg = 360;
-  for (let i = 0; i < sorted.length; i++) {
-    const next = i < sorted.length - 1 ? sorted[i + 1] : sorted[0] + 360;
-    minGapDeg = Math.min(minGapDeg, next - sorted[i]);
-  }
-  if (minGapDeg <= 0) return baseRadius;
-  const CHIP_GAP2 = 16;
-  const requiredRadius = (maxChipWidth + CHIP_GAP2) / (2 * Math.sin(minGapDeg * Math.PI / 360));
-  return Math.max(baseRadius, requiredRadius);
-}
-function solveRingRadius(angleNeededAt, floorRadius) {
-  const fits = (radius) => angleNeededAt(radius) <= 2 * Math.PI;
-  if (fits(floorRadius)) return floorRadius;
-  let lo = floorRadius;
-  let hi = floorRadius * 2;
-  while (!fits(hi)) {
-    lo = hi;
-    hi *= 2;
-  }
-  while (hi - lo > 1) {
-    const mid = (lo + hi) / 2;
-    if (fits(mid)) hi = mid;
-    else lo = mid;
-  }
-  return hi;
-}
-var boxesOverlap = (a, b) => a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1;
-var GRID_CELL = 64;
-function createBoxGrid() {
-  const cells = /* @__PURE__ */ new Map();
-  const cellRange = (box) => ({
-    cx0: Math.floor(box.x0 / GRID_CELL),
-    cx1: Math.floor(box.x1 / GRID_CELL),
-    cy0: Math.floor(box.y0 / GRID_CELL),
-    cy1: Math.floor(box.y1 / GRID_CELL)
-  });
-  return {
-    insert(box, value) {
-      const { cx0, cx1, cy0, cy1 } = cellRange(box);
-      for (let cx = cx0; cx <= cx1; cx++) {
-        for (let cy = cy0; cy <= cy1; cy++) {
-          const key = `${cx},${cy}`;
-          const bucket = cells.get(key);
-          if (bucket) bucket.push({ box, value });
-          else cells.set(key, [{ box, value }]);
-        }
-      }
-    },
-    some(box, predicate) {
-      const { cx0, cx1, cy0, cy1 } = cellRange(box);
-      for (let cx = cx0; cx <= cx1; cx++) {
-        for (let cy = cy0; cy <= cy1; cy++) {
-          if (cells.get(`${cx},${cy}`)?.some((entry) => boxesOverlap(box, entry.box) && predicate(entry.value))) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  };
-}
-function placeLabels(items) {
-  const placement = /* @__PURE__ */ new Map();
-  const keptGrid = createBoxGrid();
-  const dotGrid = createBoxGrid();
-  for (const item of items) dotGrid.insert(item.dot, item.id);
-  for (const item of [...items].sort((a, b) => b.priority - a.priority)) {
-    let index = item.labels.findIndex(
-      (label) => !keptGrid.some(label, () => true) && !dotGrid.some(label, (id) => id !== item.id)
-    );
-    if (index < 0 && item.forced && item.labels.length > 0) index = 0;
-    placement.set(item.id, index);
-    if (index >= 0) keptGrid.insert(item.labels[index], true);
-  }
-  return placement;
-}
-function findSectorAtAngle(angle, sectors) {
-  const sector = sectors.find(
-    ({ center, span }) => Math.abs(((angle - center) % 360 + 540) % 360 - 180) <= span / 2
-  );
-  return sector?.id ?? null;
-}
-var boxGap = (a, b) => Math.hypot(Math.max(0, a.x0 - b.x1, b.x0 - a.x1), Math.max(0, a.y0 - b.y1, b.y0 - a.y1));
-function pickEmptyLabelSpot(area, width, height, obstacles, prefer = () => true) {
-  const STEPS = 9;
-  const spanX = area.x1 - area.x0 - width;
-  const spanY = area.y1 - area.y0 - height;
-  if (spanX < 0 || spanY < 0) return null;
-  const centerX = (area.x0 + area.x1) / 2;
-  const centerY = (area.y0 + area.y1) / 2;
-  let best = null;
-  for (let i = 0; i < STEPS; i++) {
-    for (let j = 0; j < STEPS; j++) {
-      const x = area.x0 + width / 2 + spanX * i / (STEPS - 1);
-      const y = area.y0 + height / 2 + spanY * j / (STEPS - 1);
-      const box = { x0: x - width / 2, x1: x + width / 2, y0: y - height / 2, y1: y + height / 2 };
-      if (obstacles.some((obstacle) => boxesOverlap(box, obstacle))) continue;
-      const gap = Math.min(height, ...obstacles.map((obstacle) => boxGap(box, obstacle)));
-      const score = [
-        prefer(x, y) ? 1 : 0,
-        gap,
-        -Math.hypot(x - centerX, y - centerY)
-      ];
-      const k = best ? score.findIndex((value, index) => value !== best.score[index]) : 0;
-      if (!best || k >= 0 && score[k] > best.score[k]) best = { x, y, score };
-    }
-  }
-  return best && { x: best.x, y: best.y };
-}
-
 // src/pop-core-radial-layout.ts
 var POP_WEDGE_SPAN_DEGREES = 80;
 var POP_SUBTREE_OUTER_MARGIN = 24;
@@ -3244,11 +3201,10 @@ function getRadialPointOnCircle(angleDegrees, radius) {
   const angleRad = angleDegrees * Math.PI / 180;
   return { x: radius * Math.sin(angleRad), y: -radius * Math.cos(angleRad) };
 }
-var LABEL_CHAR_WIDTH_RATIO = 0.6;
 function getDotLabelGeometry(x, name, itemCount, itemCountRange, zoomScale) {
   const dotRadius = calculateNodeDotRadius(itemCount, itemCountRange);
   const fontSize = zoomScale === void 0 ? calculateNodeFontSize(itemCount, itemCountRange) : calculateLabelFontSizeAtZoom(itemCount, itemCountRange, zoomScale);
-  const candidates = getLabelCandidates(x, name, dotRadius, fontSize);
+  const candidates = (0, import_ui3.dotLabelCandidates)(name, dotRadius, fontSize, { gap: NODE_DOT_LABEL_GAP, preferRight: x >= 0 });
   const { x: labelX, box: label } = candidates[0];
   const dot = { x0: -dotRadius, x1: dotRadius, y0: -dotRadius, y1: dotRadius };
   const halfHeight = Math.max(dotRadius, fontSize / 2);
@@ -3268,25 +3224,6 @@ function getDotLabelGeometry(x, name, itemCount, itemCountRange, zoomScale) {
     candidates
   };
 }
-function getLabelCandidates(x, name, dotRadius, fontSize) {
-  const width = name.length * fontSize * LABEL_CHAR_WIDTH_RATIO;
-  const halfFont = fontSize / 2;
-  const side = (right2) => {
-    const labelX = (right2 ? 1 : -1) * (dotRadius + NODE_DOT_LABEL_GAP);
-    return {
-      x: labelX,
-      y: 0,
-      anchor: right2 ? "start" : "end",
-      box: { x0: right2 ? labelX : labelX - width, x1: right2 ? labelX + width : labelX, y0: -halfFont, y1: halfFont }
-    };
-  };
-  const stacked = (below) => {
-    const y = (below ? 1 : -1) * (dotRadius + NODE_DOT_LABEL_GAP + halfFont);
-    return { x: 0, y, anchor: "middle", box: { x0: -width / 2, x1: width / 2, y0: y - halfFont, y1: y + halfFont } };
-  };
-  const right = x >= 0;
-  return [side(right), side(!right), stacked(false), stacked(true)];
-}
 function renderRootLabels(container, roots) {
   container.append("g").attr("class", "gtv-wheel-root-labels").selectAll("g.gtv-root-label").data(roots).join("g").attr("class", "gtv-root-label").attr("transform", (d) => `translate(${d.x}, ${d.y})`).append("text").attr("class", "gtv-node-label").attr("dominant-baseline", "middle").attr("fill", TEXT_COLOR).text((d) => d.name);
 }
@@ -3442,10 +3379,10 @@ function hideCollidingLabels(d3Lib, container, itemCountRange, zoomScale) {
         calculateLabelFontSizeAtZoom(d.itemCount, itemCountRange, zoomScale),
         zoomScale
       );
-      return [d.id, { fontSize, candidates: getLabelCandidates(d.x, d.name, d.radius, fontSize) }];
+      return [d.id, { fontSize, candidates: (0, import_ui3.dotLabelCandidates)(d.name, d.radius, fontSize, { gap: NODE_DOT_LABEL_GAP, preferRight: d.x >= 0 }) }];
     })
   );
-  const placement = placeLabels([
+  const placement = (0, import_ui3.placeLabels)([
     ...roots.data().map((d) => ({
       id: `root:${d.id}`,
       labels: rootGeometryById.get(d.id).candidates.map((candidate) => offset(candidate.box, d.x, d.y)),
@@ -3590,7 +3527,6 @@ function WheelRadialCore({
   defaultViewport,
   viewportRestore,
   onViewportChange,
-  controlsOrientation = "vertical",
   showZoomControls = "auto",
   floatingControlsLeading,
   busy,
@@ -3733,6 +3669,8 @@ function WheelRadialCore({
     () => Math.max(chipClearanceFloor, chipClearanceFloor + maxCoreExtentDelta),
     [chipClearanceFloor, maxCoreExtentDelta]
   );
+  const { viewportSize, minScale } = panZoom;
+  const wheelCoverageRadius = viewportSize ? coverageRadius(viewportSize.width, viewportSize.height, minScale, wheelRadius) : null;
   const onRootSelectRef = (0, import_react10.useRef)(onRootSelect);
   (0, import_react10.useEffect)(() => {
     onRootSelectRef.current = onRootSelect;
@@ -3884,6 +3822,7 @@ function WheelRadialCore({
       ].filter(Boolean).join(" "),
       style: {
         "--gtv-wheel-radius": `${wheelRadius}px`,
+        ...wheelCoverageRadius !== null && { "--gtv-wheel-coverage-radius": `${wheelCoverageRadius}px` },
         "--gtv-wheel-rotation-transition-ms": `${WHEEL_ROTATION_TRANSITION_MS}ms`,
         "--gtv-wheel-rotation-easing": WHEEL_ROTATION_EASING,
         touchAction: panZoom.touchAction
@@ -4078,7 +4017,6 @@ function WheelRadialCore({
           FloatingControls,
           {
             panZoom,
-            orientation: controlsOrientation,
             zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
@@ -4098,6 +4036,7 @@ function GenreTreeWheelRadial(props) {
 
 // src/GenreTreeWheelRadialPopCoreBase.tsx
 var import_react13 = require("react");
+var import_ui4 = require("@behindthemusictree/ui");
 var d34 = __toESM(require("d3"), 1);
 
 // src/use-focus-history.ts
@@ -4276,7 +4215,6 @@ function WheelRadialPopCoreCore({
   defaultViewport,
   viewportRestore,
   onViewportChange,
-  controlsOrientation = "vertical",
   showZoomControls = "auto",
   floatingControlsLeading,
   busy,
@@ -4602,6 +4540,12 @@ function WheelRadialPopCoreCore({
     () => coreRootCircleRadius + maxCoreExtentDelta,
     [coreRootCircleRadius, maxCoreExtentDelta]
   );
+  const { viewportSize, minScale } = panZoom;
+  const wheelCoverageRadius = viewportSize ? coverageRadius(viewportSize.width, viewportSize.height, minScale, svgCanvasRadius) : null;
+  const wheelCoverageRadiusRef = (0, import_react13.useRef)(wheelCoverageRadius);
+  (0, import_react13.useEffect)(() => {
+    wheelCoverageRadiusRef.current = wheelCoverageRadius;
+  }, [wheelCoverageRadius]);
   const middleCircleFloor = mainstreamCircleRadius;
   const onRootSelectRef = (0, import_react13.useRef)(onRootSelect);
   (0, import_react13.useEffect)(() => {
@@ -4715,13 +4659,14 @@ function WheelRadialPopCoreCore({
           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()({
+          const startAngle = startDeg * Math.PI / 180;
+          const endAngle = endDeg * Math.PI / 180;
+          sectorGroup.append("path").attr("class", "gtv-wheel-scene-sector").attr("data-start-angle", startAngle).attr("data-end-angle", endAngle).attr("d", 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);
+            outerRadius: wheelCoverageRadiusRef.current ?? svgCanvasRadius,
+            startAngle,
+            endAngle
+          })).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(
@@ -4891,6 +4836,17 @@ function WheelRadialPopCoreCore({
     wheelItemCountRange,
     panel?.node.id
   ]);
+  (0, import_react13.useEffect)(() => {
+    if (!popSvgRef.current || wheelCoverageRadius === null) return;
+    d34.select(popSvgRef.current).selectAll("path.gtv-wheel-scene-sector").attr("d", function() {
+      return d34.arc()({
+        innerRadius: coreRootCircleRadius,
+        outerRadius: wheelCoverageRadius,
+        startAngle: Number(this.getAttribute("data-start-angle")),
+        endAngle: Number(this.getAttribute("data-end-angle"))
+      });
+    });
+  }, [wheelCoverageRadius, coreRootCircleRadius]);
   (0, import_react13.useEffect)(() => {
     const timeout = setTimeout(() => {
       if (popSvgRef.current) hideCollidingLabels(d34, d34.select(popSvgRef.current), wheelItemCountRange, zoomScale);
@@ -4933,7 +4889,7 @@ function WheelRadialPopCoreCore({
       const inset = REGION_LABEL_TARGET_PX / 2;
       const spot = pickEmptyLabelSpot(
         { x0: vp.left + inset, y0: vp.top + inset, x1: vp.right - inset, y1: vp.bottom - inset },
-        name.length * REGION_LABEL_TARGET_PX * LABEL_CHAR_WIDTH_RATIO,
+        name.length * REGION_LABEL_TARGET_PX * import_ui4.LABEL_CHAR_WIDTH_RATIO,
         REGION_LABEL_TARGET_PX,
         obstacles,
         (x, y) => rootIdAt(x, y) === rootId
@@ -5028,6 +4984,7 @@ function WheelRadialPopCoreCore({
       style: {
         "--gtv-wheel-radius": `${coreRootCircleRadius}px`,
         "--gtv-wheel-svg-radius": `${svgCanvasRadius}px`,
+        ...wheelCoverageRadius !== null && { "--gtv-wheel-coverage-radius": `${wheelCoverageRadius}px` },
         "--gtv-wheel-rotation-transition-ms": `${WHEEL_ROTATION_TRANSITION_MS}ms`,
         "--gtv-wheel-rotation-easing": WHEEL_ROTATION_EASING,
         touchAction: panZoom.touchAction
@@ -5282,7 +5239,6 @@ function WheelRadialPopCoreCore({
           FloatingControls,
           {
             panZoom,
-            orientation: controlsOrientation,
             zoomControls: showZoomControls,
             leading: floatingControlsLeading,
             busy,
@@ -6069,6 +6025,7 @@ function GenreTreeViewSkeleton({ viewMode }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ACCENT_TEXT_COLOR,
   DEFAULT_FRAME_HEIGHT,
   DEFAULT_FRAME_WIDTH,
   GenreTree,
@@ -6081,8 +6038,12 @@ function GenreTreeViewSkeleton({ viewMode }) {
   GenreTreeWheelRadialPopCore,
   GenreTreeWheelRight,
   GenreTreeWheelSkeleton,
+  InfoPanel,
+  ROOT_TINT_RATIO,
+  TEXT_COLOR,
   getGenreTreeColor,
   groupNodesByRoot,
-  isZoomableNode
+  isZoomableNode,
+  tintSurface
 });
 //# sourceMappingURL=index.cjs.map