@behindthemusictree/app-kit-ui 26.1.0 → 29.0.0

package/dist/index.cjs

@@ -24,13 +24,16 @@ __export(src_exports, {
   AuthErrorPopup: () => AuthErrorPopup,
   AuthPopup: () => AuthPopup,
   BasePopup: () => BasePopup,
+  GenreDetailPanel: () => GenreDetailPanel,
+  GenreInfoPanelBody: () => GenreInfoPanelBody,
+  GenreNodeActionBand: () => GenreNodeActionBand,
   GenrePlaylistTreePerRoot: () => GenrePlaylistTreePerRoot,
   GenreSearch: () => GenreSearch,
-  GenreTreeOutlineSkeleton: () => import_genre_tree_view5.GenreTreeOutlineSkeleton,
-  GenreTreeSkeleton: () => import_genre_tree_view5.GenreTreeSkeleton,
+  GenreTreeOutlineSkeleton: () => import_genre_tree_view6.GenreTreeOutlineSkeleton,
+  GenreTreeSkeleton: () => import_genre_tree_view6.GenreTreeSkeleton,
   GenreTreeView: () => GenreTreeView,
-  GenreTreeViewSkeleton: () => import_genre_tree_view5.GenreTreeViewSkeleton,
-  GenreTreeWheelSkeleton: () => import_genre_tree_view5.GenreTreeWheelSkeleton,
+  GenreTreeViewSkeleton: () => import_genre_tree_view6.GenreTreeViewSkeleton,
+  GenreTreeWheelSkeleton: () => import_genre_tree_view6.GenreTreeWheelSkeleton,
   InternalErrorPopup: () => InternalErrorPopup,
   NetworkErrorPopup: () => NetworkErrorPopup,
   PanelEdgeTab: () => PanelEdgeTab,
@@ -39,10 +42,13 @@ __export(src_exports, {
   PopupTitle: () => PopupTitle,
   Rating: () => Rating,
   SpotifyAuthErrorPopup: () => SpotifyAuthErrorPopup,
+  Toast: () => Toast,
   TrackItem: () => TrackItem,
   TrackListSidebar: () => TrackListSidebar,
   TrackPositionPlayPause: () => TrackPositionPlayPause,
-  TrackUploadPopup: () => TrackUploadPopup
+  TrackUploadPopup: () => TrackUploadPopup,
+  useGenrePlaylistPlayback: () => useGenrePlaylistPlayback,
+  useLeftDetailPanelLayout: () => useLeftDetailPanelLayout
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -50,29 +56,46 @@ module.exports = __toCommonJS(src_exports);
 var import_lucide_react = require("lucide-react");
 var import_ui = require("@behindthemusictree/ui");
 var import_jsx_runtime = require("react/jsx-runtime");
-function PopupTitle({ title, onClose, isDismissable, icon: Icon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "popup-title flex items-center justify-between bg-black p-4 rounded-t-lg", children: [
+function PopupTitle({
+  title,
+  onClose,
+  isDismissable,
+  icon: Icon,
+  className: className2 = "",
+  titleClassName = "",
+  closeButtonClassName = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `popup-title flex items-center justify-between bg-black p-4 rounded-t-lg ${className2}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
       Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5 text-white" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { id: "popup-title", className: "text-white font-semibold", children: title })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { id: "popup-title", className: `text-white font-semibold ${titleClassName}`, children: title })
     ] }),
-    isDismissable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { onClick: onClose, className: "h-8 w-8 text-white hover:text-white/80", "aria-label": "Close popup", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" }) })
+    isDismissable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Button,
+      {
+        onClick: onClose,
+        className: `h-8 w-8 text-white hover:text-white/80 ${closeButtonClassName}`,
+        "aria-label": "Close popup",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" })
+      }
+    )
   ] });
 }
 
 // src/popup/PopupButtons.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function PopupButtons({ children, alignment = "center", className = "" }) {
+function PopupButtons({ children, alignment = "center", className: className2 = "" }) {
   const alignmentClasses = {
     left: "justify-start",
     center: "justify-center",
     right: "justify-end"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `flex gap-3 ${alignmentClasses[alignment]} ${className}`, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `flex gap-3 ${alignmentClasses[alignment]} ${className2}`, children });
 }
 
 // src/popup/BasePopup.tsx
 var import_react_dom = require("react-dom");
+var import_react = require("react");
 var import_ui2 = require("@behindthemusictree/ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var typeClasses = {
@@ -96,8 +119,13 @@ function BasePopup(props) {
     type = "default",
     icon,
     isDismissable = true,
-    className,
+    className: className2,
+    overlayClassName = "",
+    titleClassName = "",
+    titleTextClassName = "",
+    closeButtonClassName = "",
     fitContent = false,
+    contentClassName = "",
     showOkButton = false,
     showCancelButton = false,
     okButtonText = "OK",
@@ -106,8 +134,49 @@ function BasePopup(props) {
     okButtonDisabled = false,
     onCancel,
     buttonAlignment = "center",
-    topOffset = 0
+    topOffset = 0,
+    trapFocus = false,
+    closeOnEscape = false,
+    closeOnBackdrop = false
   } = props;
+  const dialogRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const dialog = dialogRef.current;
+    const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const getFocusable = () => Array.from(dialog?.querySelectorAll(focusableSelector) ?? []).filter(
+      (element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true"
+    );
+    if (trapFocus) (getFocusable()[0] ?? dialog)?.focus();
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && closeOnEscape && isDismissable) {
+        event.preventDefault();
+        onClose?.();
+        return;
+      }
+      if (!trapFocus || event.key !== "Tab") return;
+      const focusable = getFocusable();
+      if (focusable.length === 0) {
+        event.preventDefault();
+        dialog?.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && (document.activeElement === first || !dialog?.contains(document.activeElement))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (document.activeElement === last || !dialog?.contains(document.activeElement))) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    if (trapFocus || closeOnEscape) document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      if (trapFocus || closeOnEscape) document.removeEventListener("keydown", handleKeyDown);
+      if (trapFocus && previousFocus?.isConnected) previousFocus.focus();
+    };
+  }, [closeOnEscape, isDismissable, onClose, trapFocus]);
   const baseClasses = "bg-white rounded-lg";
   const renderButtons = () => {
     if (!showOkButton && !showCancelButton) return null;
@@ -121,7 +190,7 @@ function BasePopup(props) {
   const popupComponent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: "fixed z-50 flex items-center justify-center bg-transparent",
+      className: `fixed z-50 flex items-center justify-center bg-transparent ${overlayClassName}`,
       style: {
         top: topOffset,
         left: 0,
@@ -131,15 +200,29 @@ function BasePopup(props) {
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "popup-title",
+      onClick: closeOnBackdrop && isDismissable ? onClose : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
-          className: `${baseClasses} ${fitContent ? typeClasses[type].replace("w-full", "w-fit") : typeClasses[type]} ${className || ""}`,
+          ref: dialogRef,
+          tabIndex: trapFocus ? -1 : void 0,
+          className: `${baseClasses} ${fitContent ? typeClasses[type].replace("w-full", "w-fit") : typeClasses[type]} ${className2 || ""}`,
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopupTitle, { title, onClose: onClose ?? (() => {
-            }), isDismissable, icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `popup-content rounded-b-lg p-4 ${contentBgClasses[type] ?? ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              PopupTitle,
+              {
+                title,
+                onClose: onClose ?? (() => {
+                }),
+                isDismissable,
+                icon,
+                className: titleClassName,
+                titleClassName: titleTextClassName,
+                closeButtonClassName
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `popup-content rounded-b-lg p-4 ${contentBgClasses[type] ?? ""} ${contentClassName}`, children: [
               children,
               renderButtons()
             ] })
@@ -152,21 +235,48 @@ function BasePopup(props) {
 }
 var BasePopup_default = BasePopup;
 
+// src/popup/Toast.tsx
+var import_react2 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Toast({ message, onClose, durationMs = 2200 }) {
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    setMounted(true);
+    const timeout = window.setTimeout(onClose, durationMs);
+    return () => window.clearTimeout(timeout);
+  }, [durationMs, onClose]);
+  if (!mounted) return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pointer-events-none fixed inset-x-0 bottom-8 z-[60] flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "pointer-events-auto w-full max-w-md rounded-md bg-[var(--color-surface)] px-4 py-4 text-sm text-[var(--color-text)] shadow-lg ring-1 ring-black/10",
+        children: message
+      }
+    ) }),
+    document.body
+  );
+}
+
 // src/popup/TrackUploadPopup.tsx
 var import_md = require("react-icons/md");
 var import_popup = require("@behindthemusictree/app-kit/popup");
 var import_track_noun = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function getStatusIcon(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdCheckCircle, { className: "text-[var(--color-green-500)]", size: 20 });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md.MdCheckCircle, { className: "text-[var(--color-green-500)]", size: 20 });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdError, { className: "text-[var(--color-red-500)]", size: 20 });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md.MdError, { className: "text-[var(--color-red-500)]", size: 20 });
     case "uploading":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdUpload, { className: "text-[var(--color-blue-500)] animate-pulse", size: 20 });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md.MdUpload, { className: "text-[var(--color-blue-500)] animate-pulse", size: 20 });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-5 h-5 rounded-full border-2 border-[var(--color-neutral-300)]" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-5 h-5 rounded-full border-2 border-[var(--color-neutral-300)]" });
   }
 }
 function getStatusText(status) {
@@ -199,7 +309,7 @@ function TrackUploadPopup({
   });
   const displayTotal = items.length > 0 ? items.length : files.length;
   const trackNoun = (0, import_track_noun.useTrackNoun)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     BasePopup,
     {
       ...rest,
@@ -210,31 +320,31 @@ function TrackUploadPopup({
       okButtonText: "OK",
       okButtonDisabled: isUploading || !allComplete,
       onOk: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-4", children: [
-        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border rounded-lg p-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center space-x-3", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-4", children: [
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border rounded-lg p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center space-x-3", children: [
               getStatusIcon(item.status),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "font-medium text-sm truncate max-w-xs", title: item.file.name, children: item.file.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-xs text-[var(--color-neutral-500)]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "font-medium text-sm truncate max-w-xs", title: item.file.name, children: item.file.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-xs text-[var(--color-neutral-500)]", children: [
                   (item.file.size / 1024 / 1024).toFixed(1),
                   " MB"
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm text-[var(--color-neutral-600)]", children: getStatusText(item.status) })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm text-[var(--color-neutral-600)]", children: getStatusText(item.status) })
           ] }),
-          item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-full bg-[var(--color-neutral-200)] rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full bg-[var(--color-neutral-200)] rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: "bg-[var(--color-blue-500)] h-2 rounded-full transition-all duration-300",
               style: { width: `${item.progress}%` }
             }
           ) }),
-          item.status === "error" && item.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-[var(--color-red-500)] text-sm mt-2", children: item.error.name === "InvalidInputError" ? "Upload failed due to invalid file data. Please check your file and try again." : item.error.name === "ZodError" ? "Upload failed due to a server error. Please try again later." : item.error.message })
+          item.status === "error" && item.error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[var(--color-red-500)] text-sm mt-2", children: item.error.name === "InvalidInputError" ? "Upload failed due to invalid file data. Please check your file and try again." : item.error.name === "ZodError" ? "Upload failed due to a server error. Please try again later." : item.error.message })
         ] }, item.id)),
-        allComplete && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-sm text-[var(--color-neutral-600)]", children: [
+        allComplete && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-sm text-[var(--color-neutral-600)]", children: [
           successfulCount,
           " successful, ",
           errorCount,
@@ -248,18 +358,18 @@ function TrackUploadPopup({
 // src/popup/AuthErrorPopup.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_ui3 = require("@behindthemusictree/ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function AuthErrorPopup({ message, onClose, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     BasePopup,
     {
       ...rest,
       title: "Sign-in error",
       isDismissable: true,
       icon: import_lucide_react2.AlertCircle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-center text-lg font-medium text-[var(--color-text)]", children: message }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui3.Button, { onClick: onClose, variant: "secondary", className: "w-full max-w-xs", children: "Close" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-center text-lg font-medium text-[var(--color-text)]", children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui3.Button, { onClick: onClose, variant: "secondary", className: "w-full max-w-xs", children: "Close" })
       ] })
     }
   );
@@ -267,23 +377,23 @@ function AuthErrorPopup({ message, onClose, ...rest }) {
 
 // src/popup/InternalErrorPopup.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function InternalErrorPopup({ errorCode, contactEmail, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     BasePopup,
     {
       ...rest,
       title: "Internal Error",
       isDismissable: false,
       icon: import_lucide_react3.AlertTriangle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.AlertCircle, { className: "h-16 w-16 text-[var(--color-red-500)]", strokeWidth: 1.5 }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-center text-[var(--color-neutral-600)]", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.AlertCircle, { className: "h-16 w-16 text-[var(--color-red-500)]", strokeWidth: 1.5 }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-center text-[var(--color-neutral-600)]", children: [
           "Please try again. If the problem persists, contact us at",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: `mailto:${contactEmail}`, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]", children: contactEmail })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: `mailto:${contactEmail}`, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]", children: contactEmail })
         ] }) }),
-        errorCode && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-sm text-[var(--color-neutral-500)] bg-[var(--color-neutral-100)] p-3 rounded-lg border border-[var(--color-neutral-100)]", children: [
+        errorCode && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-sm text-[var(--color-neutral-500)] bg-[var(--color-neutral-100)] p-3 rounded-lg border border-[var(--color-neutral-100)]", children: [
           "Error Code: ",
           errorCode
         ] })
@@ -294,18 +404,18 @@ function InternalErrorPopup({ errorCode, contactEmail, ...rest }) {
 
 // src/popup/NetworkErrorPopup.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function NetworkErrorPopup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BasePopup,
     {
       ...props,
       title: "Network Error",
       isDismissable: false,
       icon: import_lucide_react4.AlertTriangle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.AlertTriangle, { className: "h-16 w-16 text-[var(--color-neutral-600)]", strokeWidth: 1.5 }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-center text-[var(--color-neutral-700)]", children: "It seems that you are not connected to the internet. Please check your connection and try again." })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.AlertTriangle, { className: "h-16 w-16 text-[var(--color-neutral-600)]", strokeWidth: 1.5 }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-center text-[var(--color-neutral-700)]", children: "It seems that you are not connected to the internet. Please check your connection and try again." })
       ] })
     }
   );
@@ -316,7 +426,7 @@ var import_lucide_react5 = require("lucide-react");
 var import_ui4 = require("@behindthemusictree/ui");
 var import_fa = require("react-icons/fa");
 var import_fc = require("react-icons/fc");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function AuthPopup({
   handleSpotifyOAuth,
   handleGoogleOAuth,
@@ -328,7 +438,7 @@ function AuthPopup({
   ...rest
 }) {
   const showGoogle = !spotifyOnly && handleGoogleOAuth;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     BasePopup,
     {
       ...rest,
@@ -336,32 +446,32 @@ function AuthPopup({
       isDismissable: false,
       icon: import_lucide_react5.User,
       type: "auth",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center space-y-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-2 text-center", children: [
-          message && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mb-3 text-base font-medium leading-relaxed text-amber-200", children: message }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-lg font-medium leading-relaxed text-white", children: spotifyOnly ? spotifyOnlyDescription : defaultDescription })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center space-y-7", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-2 text-center", children: [
+          message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mb-3 text-base font-medium leading-relaxed text-amber-200", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-lg font-medium leading-relaxed text-white", children: spotifyOnly ? spotifyOnlyDescription : defaultDescription })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-col items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_ui4.Button,
             {
               onClick: () => handleSpotifyOAuth(redirectAfterAuthPath),
               className: "relative mb-2 w-fit transform bg-green-600 px-8 py-3 text-white shadow-lg transition-all duration-200 hover:scale-[1.02] hover:bg-green-700 hover:shadow-xl",
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center justify-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fa.FaSpotify, { className: "absolute left-6 text-3xl" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-full pl-14 pr-8 text-center text-lg font-medium", children: "Sign in with Spotify" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fa.FaSpotify, { className: "absolute left-6 text-3xl" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-full pl-14 pr-8 text-center text-lg font-medium", children: "Sign in with Spotify" })
               ] })
             }
           ),
-          showGoogle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          showGoogle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_ui4.Button,
             {
               variant: "outline",
               onClick: () => handleGoogleOAuth(redirectAfterAuthPath),
               className: "relative w-fit transform border-white bg-white px-8 py-3 text-black shadow-lg transition-all duration-200 hover:scale-[1.02] hover:bg-[var(--color-neutral-100)] hover:shadow-xl",
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center justify-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fc.FcGoogle, { className: "absolute left-6 text-2xl" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-full pl-14 pr-8 text-center text-lg font-medium text-black", children: "Sign in with Google" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fc.FcGoogle, { className: "absolute left-6 text-2xl" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-full pl-14 pr-8 text-center text-lg font-medium text-black", children: "Sign in with Google" })
               ] })
             }
           )
@@ -376,7 +486,7 @@ var import_fa2 = require("react-icons/fa");
 var import_ui5 = require("@behindthemusictree/ui");
 var import_lucide_react6 = require("lucide-react");
 var import_transport = require("@behindthemusictree/app-kit/transport");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function SpotifyAuthErrorPopup({
   message,
   details,
@@ -385,24 +495,24 @@ function SpotifyAuthErrorPopup({
   ...rest
 }) {
   const requestAccessHref = (0, import_transport.getSpotifyAllowlistMailtoHref)(contactEmail);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     BasePopup,
     {
       ...rest,
       title: "Authentication Failed",
       isDismissable: true,
       icon: import_lucide_react6.User,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center space-y-8 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fa2.FaSpotify, { className: "text-[#1DB954] text-7xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xl font-medium text-[var(--color-text)]", children: message }),
-          details && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-[var(--color-neutral-500)] bg-[var(--color-neutral-100)] p-3 rounded-lg border border-[var(--color-neutral-100)]", children: details }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-base text-[var(--color-neutral-700)]", children: "The Spotify app is in development mode, so only allowlisted accounts can connect." }),
-            requestAccessHref && contactEmail ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-base text-[var(--color-neutral-700)]", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center space-y-8 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_fa2.FaSpotify, { className: "text-[#1DB954] text-7xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xl font-medium text-[var(--color-text)]", children: message }),
+          details && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-[var(--color-neutral-500)] bg-[var(--color-neutral-100)] p-3 rounded-lg border border-[var(--color-neutral-100)]", children: details }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-base text-[var(--color-neutral-700)]", children: "The Spotify app is in development mode, so only allowlisted accounts can connect." }),
+            requestAccessHref && contactEmail ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-base text-[var(--color-neutral-700)]", children: [
               "Request access by emailing your",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "a",
                 {
                   href: requestAccessHref,
@@ -413,7 +523,7 @@ function SpotifyAuthErrorPopup({
               " ",
               "to",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "a",
                 {
                   href: requestAccessHref,
@@ -422,16 +532,16 @@ function SpotifyAuthErrorPopup({
                 }
               ),
               "."
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-base text-[var(--color-neutral-700)]", children: "To request access, contact the app owner." })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-base text-[var(--color-neutral-700)]", children: "To request access, contact the app owner." })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           import_ui5.Button,
           {
             onClick: onClose,
             className: "bg-[#1DB954] hover:bg-[#1DB954]/90 text-white w-full max-w-xs transform transition-all duration-200 hover:scale-[1.02] shadow-lg hover:shadow-xl",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fa2.FaSpotify, { className: "mr-2 text-lg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_fa2.FaSpotify, { className: "mr-2 text-lg" }),
               "Try Again"
             ]
           }
@@ -443,16 +553,16 @@ function SpotifyAuthErrorPopup({
 
 // src/auth/AuthCallbackHandler.tsx
 var import_auth = require("@behindthemusictree/app-kit/auth");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function AuthCallbackHandler({ renderStatus, ...options }) {
   const state = (0, import_auth.useAuthCallback)(options);
   if (state.status === null) return null;
-  if (renderStatus) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: renderStatus(state) });
+  if (renderStatus) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: renderStatus(state) });
   if (state.status === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full max-w-md rounded-lg border border-[color-mix(in_srgb,var(--color-red-500)_20%,transparent)] bg-[color-mix(in_srgb,var(--color-red-500)_10%,transparent)] p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "mb-2 font-semibold text-[var(--color-red-500)]", children: "Authentication Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[color-mix(in_srgb,var(--color-red-500)_80%,transparent)]", children: state.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full max-w-md rounded-lg border border-[color-mix(in_srgb,var(--color-red-500)_20%,transparent)] bg-[color-mix(in_srgb,var(--color-red-500)_10%,transparent)] p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "mb-2 font-semibold text-[var(--color-red-500)]", children: "Authentication Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[color-mix(in_srgb,var(--color-red-500)_80%,transparent)]", children: state.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
@@ -463,439 +573,116 @@ function AuthCallbackHandler({ renderStatus, ...options }) {
       )
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)]", "data-page": "auth-callback-handler", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "mb-4 text-2xl font-bold", children: "Connecting\u2026" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--color-neutral-600)]", children: "Completing sign-in." })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)]", "data-page": "auth-callback-handler", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: "mb-4 text-2xl font-bold", children: "Connecting\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--color-neutral-600)]", children: "Completing sign-in." })
   ] }) });
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_react10 = require("react");
+var import_react15 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
-var import_lucide_react12 = require("lucide-react");
-var import_ui17 = require("@behindthemusictree/ui");
+var import_lucide_react15 = require("lucide-react");
+var import_ui16 = require("@behindthemusictree/ui");
 var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
+var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
-var import_player10 = require("@behindthemusictree/app-kit/player");
-var import_popup5 = require("@behindthemusictree/app-kit/popup");
-
-// src/genre-tree/GenreDetailExtras.tsx
-var import_ui7 = require("@behindthemusictree/ui");
-var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
-
-// src/genre-tree/ClampedText.tsx
-var import_react = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function ClampedText({ children, className = "" }) {
-  const ref = (0, import_react.useRef)(null);
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  const [overflows, setOverflows] = (0, import_react.useState)(false);
-  (0, import_react.useLayoutEffect)(() => {
-    const element = ref.current;
-    if (!element || expanded) return;
-    setOverflows(element.scrollHeight > element.clientHeight);
-  }, [children, expanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { ref, className: `${className} ${expanded ? "" : "line-clamp-3"}`, children }),
-    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": expanded,
-        onClick: () => setExpanded((value) => !value),
-        className: "mt-1 text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
-        children: expanded ? "Show less" : "Show more"
-      }
-    )
-  ] });
-}
+var import_popup6 = require("@behindthemusictree/app-kit/popup");
 
-// src/genre-tree/GenrePlaylistTracks.tsx
-var import_react2 = require("react");
-var import_react_query = require("@tanstack/react-query");
-var import_zod = require("zod");
-var import_fa5 = require("react-icons/fa");
-var import_ui6 = require("@behindthemusictree/ui");
-var import_auth2 = require("@behindthemusictree/app-kit/auth");
-var import_transport2 = require("@behindthemusictree/app-kit/transport");
-var import_transport3 = require("@behindthemusictree/app-kit/transport");
-var import_transport4 = require("@behindthemusictree/app-kit/transport");
+// src/genre-tree/playlist-tree/TreePerRoot.tsx
+var import_react4 = require("react");
+var import_genre_tree_view = require("@behindthemusictree/genre-tree-view");
 var import_player = require("@behindthemusictree/app-kit/player");
-var import_player2 = require("@behindthemusictree/app-kit/player");
 var import_popup2 = require("@behindthemusictree/app-kit/popup");
+var import_transport2 = require("@behindthemusictree/app-kit/transport");
 
-// src/genre-tree/UnplayableReason.tsx
-var import_fa3 = require("react-icons/fa");
+// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
+var import_react3 = require("react");
 var import_genre_tree = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function UnplayableReason({ reason }) {
-  if (reason !== import_genre_tree.NO_VIDEO_LABEL) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: reason });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { role: "img", "aria-label": reason, className: "relative inline-flex shrink-0 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_fa3.FaYoutube, { size: 16, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-hidden": "true", className: "absolute left-1/2 top-1/2 h-0.5 w-[130%] -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded bg-current" })
-  ] });
-}
-
-// src/genre-tree/GenrePlaylistTracks.tsx
-var import_transport5 = require("@behindthemusictree/app-kit/transport");
-var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
-
-// src/genre-tree/MusicBrainzRecordingLink.tsx
-var import_fa4 = require("react-icons/fa");
-var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function MusicBrainzRecordingLink({ song }) {
-  const url = (0, import_genre_tree2.musicBrainzRecordingUrl)(song);
-  if (!url) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "a",
-    {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      "aria-label": `View ${song.title} on MusicBrainz`,
-      title: "View on MusicBrainz",
-      className: "inline-flex shrink-0 items-center opacity-50 hover:opacity-100 focus-visible:opacity-100",
-      onClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa4.FaExternalLinkAlt, { size: 10 })
-    }
+function useGenrePlaylistPlayback({
+  scope,
+  genrePlaylists,
+  artist = null
+}) {
+  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree.useTrackList)();
+  const origin = trackList?.origin;
+  const playingNodeId = (0, import_react3.useMemo)(() => {
+    if (!origin) return null;
+    if (!artist) return origin.type === import_genre_tree.TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
+    if (origin.type !== import_genre_tree.TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
+    const { genreUuid } = origin;
+    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
+  }, [origin, artist, genrePlaylists]);
+  const play = (0, import_react3.useCallback)(
+    async (genrePlaylist) => {
+      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
+      if (!genrePlaylist.criteria) return;
+      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
+    },
+    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
   );
+  return (0, import_react3.useMemo)(() => ({ playingNodeId, play }), [playingNodeId, play]);
 }
 
-// src/genre-tree/GenrePlaylistTracks.tsx
-var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
+// src/genre-tree/playlist-tree/TreePerRoot.tsx
 var import_track_noun2 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = (0, import_transport3.PaginatedResponseSchema)(import_genre_tree5.SongDetailedSchema).extend({
-  overallTotal: import_zod.z.number().nullable(),
-  page: import_zod.z.number().nullable(),
-  totalPages: import_zod.z.number().nullable()
-});
-var TEXT_CELL = "min-w-0 flex-1 truncate [@container(min-width:40rem)]:flex [@container(min-width:40rem)]:gap-2";
-var TITLE_CELL = "[@container(min-width:40rem)]:flex-[2] [@container(min-width:40rem)]:truncate";
-var COLUMN_CELL = "[@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:truncate";
-var ALBUM_CELL = `hidden [@container(min-width:40rem)]:block ${COLUMN_CELL}`;
-var SEPARATOR = "[@container(min-width:40rem)]:hidden";
-var nextCursor = (next) => {
-  const cursor = new URL(next).searchParams.get("cursor");
-  if (!cursor) throw new Error(`Songs next link has no cursor: ${next}`);
-  return cursor;
-};
-function GenrePlaylistTracks({
-  genreUuid,
-  genrePlaylist,
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function GenrePlaylistTreePerRoot({
   scope,
-  getBackendBaseUrl,
-  renderArtistLink,
-  renderSongLeading,
-  renderSongActions,
-  renderTracksToolbar,
-  artist = null
+  className: className2,
+  rootUuid,
+  genrePlaylistTreePerRoot,
+  handleGenreCreationAction,
+  handleGenreRenameAction,
+  additionalActions,
+  onNodeClick,
+  onNodeHover,
+  renderInfoPanelBody,
+  selectedNodeId,
+  onSelectedNodeChange,
+  hideInfoPanelClose,
+  hideInfoPanelTitle,
+  readOnly = false,
+  showToolbar,
+  wheelZoom,
+  defaultViewport,
+  viewportRestore,
+  onViewportChange,
+  playback,
+  ...infoPanelCuration
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree6.useTrackList)();
-  const { session, sessionRestored } = (0, import_auth2.useSession)();
-  const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player.usePlayer)();
-  const { showPopup } = (0, import_popup2.usePopup)();
+  const { isPlaying, setIsPlaying } = (0, import_player.usePlayer)();
+  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
+  const { playingNodeId, play } = playback ?? defaultPlayback;
   const trackNoun = (0, import_track_noun2.useTrackNoun)();
-  const { uuid } = genrePlaylist;
-  const { fetch } = (0, import_transport2.useFetchWrapper)(getBackendBaseUrl);
-  const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
-    queryKey: scope === "me" ? import_genre_tree3.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree4.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree4.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid),
-    queryFn: async ({ pageParam }) => {
-      if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
-      const response = await fetch(
-        import_genre_tree4.libraryEndpoints.reference.songs.list(),
-        true,
-        false,
-        {},
-        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
-      );
-      const parsed = (0, import_transport4.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
-      return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
-    },
-    initialPageParam: scope === "me" ? 1 : "",
-    getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
-    enabled: scope !== "me" || sessionRestored && !!session?.accessToken
-  });
-  const sentinelRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    const sentinel = sentinelRef.current;
-    if (!hasNextPage || isFetchingNextPage || !sentinel) return;
-    const observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) {
-        void fetchNextPage();
-      }
-    });
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-  const pages = data?.pages ?? [];
-  const tracks = pages.flatMap((page) => page.tracks);
-  const total = pages[0]?.total ?? void 0;
-  const play = (startSongUuid) => {
-    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
-    started.catch((error) => {
-      console.error("Failed to play genre playlist:", error);
-      showPopup(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InternalErrorPopup, { errorCode: import_transport5.ErrorCode.CLIENT_UNKNOWN }));
-    });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
-      (0, import_track_noun2.capitalize)(trackNoun.plural),
-      total !== void 0 && ` (${total})`
-    ] }),
-    renderTracksToolbar?.(),
-    isPending ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui6.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { role: "alert", children: [
-      "Couldn't load ",
-      trackNoun.plural,
-      ".",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
-      tracks.map((track, index) => {
-        const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
-        const isCurrent = playerTrackObject?.track.id === track.uuid;
-        const isPlaying = isCurrent && playState === import_player2.PlayStates.PLAYING;
-        const text = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: TITLE_CELL, children: track.title }),
-          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_genre_tree7.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
-          track.album && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
-        ] });
-        const leading = renderSongLeading?.(track, index);
-        const actions = renderSongActions?.(track);
-        const unplayableReason = (0, import_genre_tree5.isSong)(track) ? (0, import_genre_tree5.songUnplayableReason)(track) : null;
-        if (unplayableReason) {
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", title: unplayableReason, children: [
-            leading,
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "button",
-              {
-                type: "button",
-                disabled: true,
-                "aria-disabled": "true",
-                "aria-label": `${label} \u2014 ${unplayableReason}`,
-                className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa5.FaPlay, { size: 10 })
-              }
-            ),
-            text,
-            (0, import_genre_tree5.isSong)(track) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MusicBrainzRecordingLink, { song: track }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "shrink-0 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UnplayableReason, { reason: unplayableReason }) }),
-            actions
-          ] }, track.uuid);
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-          "li",
-          {
-            className: `group flex min-h-8 items-center gap-1 rounded px-1 hover:bg-[var(--color-neutral-100)] ${isCurrent ? "font-medium text-[var(--color-primary)]" : ""}`,
-            children: [
-              leading,
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
-                  className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== import_player2.PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
-                  onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
-                  children: isCurrent && playState === import_player2.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui6.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa5.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa5.FaPlay, { size: 10 })
-                }
-              ),
-              text,
-              (0, import_genre_tree5.isSong)(track) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MusicBrainzRecordingLink, { song: track }),
-              actions
-            ]
-          },
-          track.uuid
-        );
-      }),
-      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
-    ] })
-  ] });
-}
-
-// src/genre-tree/GenreDetailExtras.tsx
-var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function GenreDetailExtras({
-  genreUuid,
-  genrePlaylist,
-  scope,
-  getBackendBaseUrl,
-  criteriaOverviewSchema,
-  renderGenreDetailExtras,
-  renderArtistLink,
-  renderSummary,
-  renderEssentialTracks,
-  family,
-  ...trackSlots
-}) {
-  const trackNoun = (0, import_track_noun3.useTrackNoun)();
-  const { data: overview, isPending } = (0, import_genre_tree8.useFetchGenreOverview)(
-    genreUuid,
-    scope,
-    getBackendBaseUrl,
-    criteriaOverviewSchema
-  );
-  if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui7.Skeleton, { className: "h-4 w-3/4" })
-      ] }),
-      family
-    ] });
-  }
-  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: family });
-  const { summary, description, summarySourceUrl, essentialSongs } = overview;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3.5 py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text-muted)]", children: description }, genreUuid) }),
-    renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid),
-      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        "a",
-        {
-          href: summarySourceUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "mt-1 inline-block text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
-          children: "Source: Wikipedia"
-        }
-      )
-    ] }),
-    renderSummary && summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "a",
-      {
-        href: summarySourceUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "mx-3.5 mb-2.5 inline-block text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
-        children: "Source: Wikipedia"
-      }
-    ),
-    family,
-    renderGenreDetailExtras?.(overview),
-    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
-        "Essential ",
-        trackNoun.plural
-      ] }),
-      essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1", children: "\u2014" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      GenrePlaylistTracks,
-      {
-        genreUuid,
-        genrePlaylist,
-        scope,
-        getBackendBaseUrl,
-        renderArtistLink,
-        ...trackSlots
-      }
-    )
-  ] });
-}
-
-// src/genre-tree/playlist-tree/TreePerRoot.tsx
-var import_react4 = require("react");
-var import_genre_tree_view = require("@behindthemusictree/genre-tree-view");
-var import_player3 = require("@behindthemusictree/app-kit/player");
-var import_popup3 = require("@behindthemusictree/app-kit/popup");
-var import_transport6 = require("@behindthemusictree/app-kit/transport");
-
-// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
-var import_react3 = require("react");
-var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
-function useGenrePlaylistPlayback({
-  scope,
-  genrePlaylists,
-  artist = null
-}) {
-  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree9.useTrackList)();
-  const origin = trackList?.origin;
-  const playingNodeId = (0, import_react3.useMemo)(() => {
-    if (!origin) return null;
-    if (!artist) return origin.type === import_genre_tree9.TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
-    if (origin.type !== import_genre_tree9.TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
-    const { genreUuid } = origin;
-    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
-  }, [origin, artist, genrePlaylists]);
-  const play = (0, import_react3.useCallback)(
-    async (genrePlaylist) => {
-      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
-      if (!genrePlaylist.criteria) return;
-      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
-    },
-    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
-  );
-  return (0, import_react3.useMemo)(() => ({ playingNodeId, play }), [playingNodeId, play]);
-}
-
-// src/genre-tree/playlist-tree/TreePerRoot.tsx
-var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function GenrePlaylistTreePerRoot({
-  scope,
-  className,
-  rootUuid,
-  genrePlaylistTreePerRoot,
-  handleGenreCreationAction,
-  handleGenreRenameAction,
-  additionalActions,
-  onNodeClick,
-  onNodeHover,
-  renderInfoPanelBody,
-  selectedNodeId,
-  onSelectedNodeChange,
-  hideInfoPanelClose,
-  hideInfoPanelTitle,
-  readOnly = false,
-  showToolbar,
-  wheelZoom,
-  controlsOrientation,
-  defaultViewport,
-  onViewportChange,
-  playback,
-  ...infoPanelCuration
-}) {
-  const { isPlaying, setIsPlaying } = (0, import_player3.usePlayer)();
-  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
-  const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = (0, import_track_noun4.useTrackNoun)();
-  const { showPopup } = (0, import_popup3.usePopup)();
-  const nodes = (0, import_react4.useMemo)(
-    () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
-      id: genrePlaylist.uuid,
-      parentId: genrePlaylist.parent?.uuid ?? null,
-      name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
-      actionable: Boolean(genrePlaylist.criteria),
-      side: genrePlaylist.criteria?.side ?? void 0,
-      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
-      umbrella: genrePlaylist.isUmbrella
-    })),
-    [genrePlaylistTreePerRoot]
-  );
-  const handlePlayPause = (0, import_react4.useCallback)(
-    (nodeId) => {
-      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === nodeId);
-      if (!genrePlaylist) return;
-      if (nodeId === playingNodeId) {
-        setIsPlaying(!isPlaying);
-        return;
+  const { showPopup } = (0, import_popup2.usePopup)();
+  const nodes = (0, import_react4.useMemo)(
+    () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
+      id: genrePlaylist.uuid,
+      parentId: genrePlaylist.parent?.uuid ?? null,
+      name: genrePlaylist.name,
+      itemCount: genrePlaylist.tracksCount,
+      actionable: Boolean(genrePlaylist.criteria),
+      side: genrePlaylist.criteria?.side ?? void 0,
+      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
+      umbrella: genrePlaylist.isUmbrella
+    })),
+    [genrePlaylistTreePerRoot]
+  );
+  const handlePlayPause = (0, import_react4.useCallback)(
+    (nodeId) => {
+      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === nodeId);
+      if (!genrePlaylist) return;
+      if (nodeId === playingNodeId) {
+        setIsPlaying(!isPlaying);
+        return;
       }
       if (genrePlaylist.tracksCount === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
         console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InternalErrorPopup, { errorCode: import_transport6.ErrorCode.CLIENT_UNKNOWN }));
+        showPopup(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InternalErrorPopup, { errorCode: import_transport2.ErrorCode.CLIENT_UNKNOWN }));
       });
     },
     [
@@ -927,12 +714,12 @@ function GenrePlaylistTreePerRoot({
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_genre_tree_view.GenreTree,
     {
-      className,
+      className: className2,
       nodes,
-      itemCountLabel: `${(0, import_track_noun4.capitalize)(trackNoun.singular)} count`,
+      itemCountLabel: `${(0, import_track_noun2.capitalize)(trackNoun.singular)} count`,
       rootColor: (0, import_genre_tree_view.getGenreTreeColor)(rootUuid),
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
@@ -950,8 +737,8 @@ function GenrePlaylistTreePerRoot({
       hideInfoPanelTitle,
       showToolbar,
       wheelZoom,
-      controlsOrientation,
       defaultViewport,
+      viewportRestore,
       onViewportChange,
       ...infoPanelCuration,
       readOnly
@@ -962,19 +749,26 @@ function GenrePlaylistTreePerRoot({
 // src/genre-tree/playlist-tree/TreeWheel.tsx
 var import_react5 = require("react");
 var import_genre_tree_view2 = require("@behindthemusictree/genre-tree-view");
-var import_player4 = require("@behindthemusictree/app-kit/player");
-var import_popup4 = require("@behindthemusictree/app-kit/popup");
-var import_transport7 = require("@behindthemusictree/app-kit/transport");
+var import_player2 = require("@behindthemusictree/app-kit/player");
+var import_popup3 = require("@behindthemusictree/app-kit/popup");
+var import_transport3 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/playlist-tree/size-metric.ts
-var genrePlaylistSize = (genrePlaylist, metric) => metric === "views" ? genrePlaylist.viewsCount : genrePlaylist.tracksCount;
+var hasViewsCount = (genrePlaylists) => genrePlaylists.every((genrePlaylist) => genrePlaylist.viewsCount !== void 0);
+var genrePlaylistSize = (genrePlaylist, metric) => {
+  if (metric === "songs") return genrePlaylist.tracksCount;
+  if (genrePlaylist.viewsCount === void 0) {
+    throw new Error(`Genre playlist ${genrePlaylist.uuid} has no viewsCount to size by views`);
+  }
+  return genrePlaylist.viewsCount;
+};
 
 // src/genre-tree/playlist-tree/TreeWheel.tsx
-var import_track_noun5 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheel({
   scope,
-  className,
+  className: className2,
   genrePlaylists,
   handleGenreCreationAction,
   handleGenreRenameAction,
@@ -989,20 +783,20 @@ function GenrePlaylistTreeWheel({
   readOnly = false,
   allowWheelRotation,
   showToolbar,
-  controlsOrientation,
   sizeMetric = "songs",
   floatingControlsLeading,
   busy,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   playback,
   ...infoPanelCuration
 }) {
-  const { isPlaying, setIsPlaying } = (0, import_player4.usePlayer)();
+  const { isPlaying, setIsPlaying } = (0, import_player2.usePlayer)();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = (0, import_track_noun5.useTrackNoun)();
-  const { showPopup } = (0, import_popup4.usePopup)();
+  const trackNoun = (0, import_track_noun3.useTrackNoun)();
+  const { showPopup } = (0, import_popup3.usePopup)();
   const nodes = (0, import_react5.useMemo)(
     () => genrePlaylists.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
@@ -1028,7 +822,7 @@ function GenrePlaylistTreeWheel({
       }
       play(genrePlaylist).catch((error) => {
         console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InternalErrorPopup, { errorCode: import_transport7.ErrorCode.CLIENT_UNKNOWN }));
+        showPopup(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InternalErrorPopup, { errorCode: import_transport3.ErrorCode.CLIENT_UNKNOWN }));
       });
     },
     [
@@ -1060,12 +854,12 @@ function GenrePlaylistTreeWheel({
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_genre_tree_view2.GenreTreeWheel,
     {
-      className,
+      className: className2,
       nodes,
-      itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun5.capitalize)(trackNoun.singular)} count`,
+      itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun3.capitalize)(trackNoun.singular)} count`,
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
       onPlayPause: handlePlayPause,
@@ -1082,10 +876,10 @@ function GenrePlaylistTreeWheel({
       hideInfoPanelTitle,
       allowWheelRotation,
       showToolbar,
-      controlsOrientation,
       floatingControlsLeading,
       busy,
       defaultViewport,
+      viewportRestore,
       onViewportChange,
       ...infoPanelCuration,
       readOnly
@@ -1096,13 +890,13 @@ function GenrePlaylistTreeWheel({
 // src/genre-tree/playlist-tree/TreeWheelRadialPopCore.tsx
 var import_react6 = require("react");
 var import_genre_tree_view3 = require("@behindthemusictree/genre-tree-view");
-var import_player5 = require("@behindthemusictree/app-kit/player");
-var import_track_noun6 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_player3 = require("@behindthemusictree/app-kit/player");
+var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheelRadialPopCore(props) {
   const {
     scope,
-    className,
+    className: className2,
     genrePlaylists,
     handleGenreCreationAction,
     handleGenreRenameAction,
@@ -1117,12 +911,12 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     readOnly = false,
     allowWheelRotation,
     showToolbar,
-    controlsOrientation,
     sizeMetric = "songs",
     floatingControlsLeading,
     busy,
     outline = false,
     defaultViewport,
+    viewportRestore,
     onViewportChange,
     playback
   } = props;
@@ -1135,10 +929,10 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     hideExpandButton: props.hideExpandButton,
     overlayPanel: props.overlayPanel
   };
-  const { isPlaying, setIsPlaying } = (0, import_player5.usePlayer)();
+  const { isPlaying, setIsPlaying } = (0, import_player3.usePlayer)();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = (0, import_track_noun6.useTrackNoun)();
+  const trackNoun = (0, import_track_noun4.useTrackNoun)();
   const nodes = (0, import_react6.useMemo)(
     () => genrePlaylists.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
@@ -1192,9 +986,9 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     }
   }, []);
   const treeProps = {
-    className,
+    className: className2,
     nodes,
-    itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun6.capitalize)(trackNoun.singular)} count`,
+    itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun4.capitalize)(trackNoun.singular)} count`,
     playingNodeId,
     playState: isPlaying ? "playing" : "paused",
     onPlayPause: handlePlayPause,
@@ -1213,15 +1007,15 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     ...infoPanelCuration,
     readOnly
   };
-  return outline ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_genre_tree_view3.GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return outline ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_genre_tree_view3.GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_genre_tree_view3.GenreTreeWheelRadialPopCore,
     {
       ...treeProps,
       allowWheelRotation,
-      controlsOrientation,
       floatingControlsLeading,
       busy,
       defaultViewport,
+      viewportRestore,
       onViewportChange,
       ...focus.onFocusGenreChange ? { focusNodeId: focus.focusGenreUuid, onFocusChange: focus.onFocusGenreChange } : { focusNodeId: void 0, onFocusChange: void 0 }
     }
@@ -1230,7 +1024,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
 
 // src/genre-tree/GenreTreeWheelHandoff.tsx
 var import_react7 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
   const [revealed, setRevealed] = (0, import_react7.useState)(false);
   const onRevealedChangeRef = (0, import_react7.useRef)(onRevealedChange);
@@ -1249,8 +1043,8 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
       cancelAnimationFrame(innerFrame);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: "absolute inset-0 transition-opacity duration-150 ease-out",
@@ -1259,15 +1053,15 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
         children
       }
     ),
-    !revealed && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
+    !revealed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
   ] });
 }
 
 // src/genre-tree/GenreSearch.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_ui8 = require("@behindthemusictree/ui");
-var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_ui6 = require("@behindthemusictree/ui");
+var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function GenreSearch({
   genrePlaylists,
   onSelect,
@@ -1278,7 +1072,7 @@ function GenreSearch({
   onQueryChange,
   extraResults
 }) {
-  const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree10.useGenreSearch)({
+  const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree2.useGenreSearch)({
     genrePlaylists,
     onSelect,
     selectedName,
@@ -1289,20 +1083,20 @@ function GenreSearch({
   const loading = query !== "" && query !== selectedName && (extraResults?.loading ?? false);
   const showList = results.length > 0 || extraItems.length > 0;
   const heading = "px-3 pt-2 pb-1 text-xs font-medium uppercase text-[var(--color-text-muted)]";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "genre-search relative w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0", children: [
-    onPrevious && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "genre-search relative w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: [
+    onPrevious && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         type: "button",
         "aria-label": "Previous",
         title: "Previous",
-        className: "genre-search-previous absolute left-2 top-1/2 z-10 hidden p-1.5 text-[var(--color-text-muted)] rounded-full -translate-y-1/2 hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
+        className: "genre-search-previous absolute left-2 top-1/2 z-10 hidden items-center justify-center p-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] [@media(pointer:coarse)]:min-w-[var(--layout-touch-target)] text-[var(--color-text-muted)] rounded-full -translate-y-1/2 hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
         onClick: onPrevious,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_ui8.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_ui6.Input,
       {
         type: "text",
         value: query,
@@ -1313,24 +1107,27 @@ function GenreSearch({
         placeholder: placeholder ?? `${label}\u2026`,
         "aria-label": label,
         "aria-busy": loading,
+        inputMode: "search",
+        enterKeyHint: "search",
+        autoComplete: "off",
         className: "h-[var(--layout-search-h,3rem)] pl-6 pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "span",
         {
           "data-loading": loading,
           className: "relative p-2 text-[var(--color-text-muted)] pointer-events-none",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               import_lucide_react7.Search,
               {
                 "aria-hidden": "true",
                 className: `w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-0" : ""}`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               import_lucide_react7.LoaderCircle,
               {
                 "aria-hidden": "true",
@@ -1340,44 +1137,44 @@ function GenreSearch({
           ]
         }
       ),
-      canClear && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      canClear && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
           "aria-label": "Clear search",
-          className: "p-2 text-[var(--color-text-muted)] rounded-full hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
+          className: "flex items-center justify-center p-2 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] [@media(pointer:coarse)]:min-w-[var(--layout-touch-target)] text-[var(--color-text-muted)] rounded-full hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
           onClick: () => {
             clear();
             onQueryChange?.("");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.X, { "aria-hidden": "true", className: "w-6 h-6" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.X, { "aria-hidden": "true", className: "w-6 h-6" })
         }
       )
     ] }),
-    extraResults?.status && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: extraResults.status }),
-    showList && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: "genre-search-results absolute z-40 w-full max-h-64 mt-1 overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-xl shadow-md", children: [
-      extraResults && results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: heading, children: "Genres" }),
-      results.map((genrePlaylist) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    extraResults?.status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: extraResults.status }),
+    showList && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("ul", { className: "genre-search-results absolute z-40 w-full max-h-[min(16rem,50dvh)] mt-1 overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-xl shadow-md", children: [
+      extraResults && results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: heading, children: "Genres" }),
+      results.map((genrePlaylist) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "button",
         {
           type: "button",
-          className: "w-full px-3 py-1.5 text-left hover:bg-[var(--color-surface-muted)]",
+          className: "w-full px-3 py-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] text-left hover:bg-[var(--color-surface-muted)]",
           onClick: () => {
             select(genrePlaylist);
             onQueryChange?.("");
           },
           children: [
             genrePlaylist.name,
-            genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
+            genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
           ]
         }
       ) }, genrePlaylist.uuid)),
-      extraResults && extraItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: heading, children: extraResults.label }),
-      extraItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      extraResults && extraItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: heading, children: extraResults.label }),
+      extraItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
-          className: "w-full px-3 py-1.5 text-left hover:bg-[var(--color-surface-muted)]",
+          className: "w-full px-3 py-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] text-left hover:bg-[var(--color-surface-muted)]",
           onClick: () => {
             setQuery("");
             onQueryChange?.("");
@@ -1390,45 +1187,282 @@ function GenreSearch({
   ] });
 }
 
+// src/genre-tree/GenreInfoPanelBody.tsx
+var import_player6 = require("@behindthemusictree/app-kit/player");
+
 // src/genre-tree/GenreActionBand.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function GenreActionBand({
-  node,
-  onPlayPause,
-  isPlaying = false,
-  onZoomIn,
-  onAddChild,
-  onRename,
-  onChangeParent,
-  additionalActions
+var import_lucide_react11 = require("lucide-react");
+
+// src/genre-tree/ShareActionButton.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_popup4 = require("@behindthemusictree/app-kit/popup");
+
+// src/genre-tree/SharePopup.tsx
+var import_react8 = require("react");
+var import_lucide_react9 = require("lucide-react");
+var import_fa3 = require("react-icons/fa");
+var import_si = require("react-icons/si");
+
+// src/genre-tree/ShareDestinationButton.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-xs text-[var(--color-text)] transition-colors hover:bg-[var(--color-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
+function Contents({ icon, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "max-w-full truncate", children: label })
+  ] });
+}
+function ShareDestinationButton({
+  label,
+  icon,
+  href,
+  onClick,
+  disabled = false,
+  ariaLabel
 }) {
-  const items = [];
-  const adminItems = [];
-  if (onPlayPause) {
-    items.push({
-      key: "play-pause",
-      label: isPlaying ? "Pause" : "Play",
-      icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
-      onClick: onPlayPause
-    });
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Contents, { icon, label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Contents, { icon, label }) });
+}
+
+// src/genre-tree/SharePreviewCard.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function SharePreviewCard({ target, url }) {
+  const Icon = target.kind === "genre" ? import_lucide_react8.Music2 : import_lucide_react8.UserRound;
+  const typeLabel = target.kind === "genre" ? "Genre" : "Artist";
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
+    ] })
+  ] }) });
+}
+
+// src/genre-tree/SharePopup.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function resolveAbsoluteUrl(url) {
+  try {
+    const parsed = new URL(url, window.location.href);
+    return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+async function copyText(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  const input = document.createElement("textarea");
+  input.value = text;
+  input.setAttribute("readonly", "");
+  input.style.position = "fixed";
+  input.style.opacity = "0";
+  document.body.append(input);
+  input.select();
+  try {
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    input.remove();
+  }
+}
+function SharePopup({ target, url, onClose }) {
+  const [absoluteUrl, setAbsoluteUrl] = (0, import_react8.useState)(url);
+  const [copyStatus, setCopyStatus] = (0, import_react8.useState)("idle");
+  const [canUseNativeShare, setCanUseNativeShare] = (0, import_react8.useState)(false);
+  const [shareError, setShareError] = (0, import_react8.useState)(null);
+  const [toastId, setToastId] = (0, import_react8.useState)(0);
+  (0, import_react8.useEffect)(() => {
+    setAbsoluteUrl(resolveAbsoluteUrl(url) ?? "");
+    setCopyStatus("idle");
+    setShareError(null);
+  }, [url]);
+  (0, import_react8.useEffect)(() => {
+    setCanUseNativeShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
+  }, []);
+  const destinationUrls = (0, import_react8.useMemo)(() => {
+    if (!absoluteUrl) return null;
+    const message = `${target.name} \u2014 ${absoluteUrl}`;
+    return {
+      whatsapp: `https://wa.me/?text=${encodeURIComponent(message)}`,
+      gmail: `https://mail.google.com/mail/?view=cm&fs=1&su=${encodeURIComponent(`Share: ${target.name}`)}&body=${encodeURIComponent(message)}`
+    };
+  }, [absoluteUrl, target.name]);
+  const handleCopy = async () => {
+    if (!absoluteUrl) {
+      setCopyStatus("failed");
+      return;
+    }
+    setShareError(null);
+    const copied = await copyText(absoluteUrl);
+    setCopyStatus(copied ? "idle" : "failed");
+    if (copied) setToastId((id) => id + 1);
+  };
+  const dismissToast = (0, import_react8.useCallback)(() => setToastId(0), []);
+  const handleNativeShare = async () => {
+    if (!absoluteUrl || !navigator.share) return;
+    setShareError(null);
+    try {
+      await navigator.share({ title: target.name, url: absoluteUrl });
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") return;
+      setShareError("Could not open the share options.");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      BasePopup_default,
+      {
+        title: "Share",
+        onClose,
+        isDismissable: true,
+        trapFocus: true,
+        closeOnEscape: true,
+        closeOnBackdrop: true,
+        className: "!w-full !max-w-[28rem] overflow-hidden !rounded-[2rem] !bg-[var(--color-surface)] shadow-2xl",
+        overlayClassName: "!bg-black/50 p-4 backdrop-blur-[2px]",
+        titleClassName: "!rounded-none !bg-transparent !px-6 !pb-2 !pt-6",
+        titleTextClassName: "!text-xl !font-semibold !text-[var(--color-text)]",
+        closeButtonClassName: "!h-10 !w-10 !rounded-none !border-0 !bg-transparent !p-0 !text-[var(--color-text)] hover:!bg-transparent hover:!text-[var(--color-text)]",
+        contentClassName: "!rounded-none !bg-transparent !px-6 !pb-6 !pt-2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ShareDestinationButton,
+              {
+                label: "Copy Link",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                onClick: () => void handleCopy(),
+                ariaLabel: "Copy link",
+                disabled: !absoluteUrl
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ShareDestinationButton,
+              {
+                label: "WhatsApp",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
+                href: destinationUrls?.whatsapp,
+                ariaLabel: `Share ${target.name} via WhatsApp`,
+                disabled: !absoluteUrl
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ShareDestinationButton,
+              {
+                label: "Gmail",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
+                href: destinationUrls?.gmail,
+                ariaLabel: `Email ${target.name} with Gmail`,
+                disabled: !absoluteUrl
+              }
+            ),
+            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ShareDestinationButton,
+              {
+                label: "More",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                onClick: () => void handleNativeShare(),
+                ariaLabel: "More sharing options",
+                disabled: !absoluteUrl
+              }
+            )
+          ] }),
+          copyStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
+        ] })
+      }
+    ),
+    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+  ] });
+}
+
+// src/genre-tree/ShareActionButton.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ShareActionButton({ target, url }) {
+  const { showPopup, hidePopup } = (0, import_popup4.usePopup)();
+  const openSharePopup = () => {
+    showPopup(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SharePopup, { target, url, onClose: hidePopup }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: openSharePopup,
+      className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
+      "aria-label": `Share ${target.name}`,
+      title: `Share ${target.name}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+        "Share"
+      ]
+    }
+  );
+}
+
+// src/genre-tree/GenreActionBand.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function GenreActionBand({
+  node,
+  onPlayPause,
+  isPlaying = false,
+  onZoomIn,
+  onAddChild,
+  onRename,
+  onChangeParent,
+  side,
+  onToggleSide,
+  toggleSideDisabledReason,
+  additionalActions,
+  shareTarget,
+  shareUrl
+}) {
+  const items = [];
+  const adminItems = [];
+  if (onPlayPause) {
+    items.push({
+      key: "play-pause",
+      label: isPlaying ? "Pause" : "Play",
+      icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onPlayPause
+    });
   }
   if (onZoomIn) {
     items.push({
       key: "zoom-in",
       label: "Focus",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onZoomIn
     });
   }
   if (onAddChild) {
-    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
   }
   if (onRename) {
-    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
   }
   if (onChangeParent) {
-    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+  }
+  if (onToggleSide) {
+    adminItems.push({
+      key: "toggle-side",
+      label: side === "pop" ? "Make core" : "Make pop",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onToggleSide,
+      disabled: !!toggleSideDisabledReason,
+      title: toggleSideDisabledReason
+    });
   }
   for (const action of additionalActions?.(node) ?? []) {
     items.push({
@@ -1439,12 +1473,13 @@ function GenreActionBand({
       disabled: action.enabled ? !action.enabled(node) : false
     });
   }
-  if (items.length === 0 && adminItems.length === 0) return null;
+  if (items.length === 0 && (!shareTarget || !shareUrl) && adminItems.length === 0) return null;
   const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "button",
     {
       type: "button",
       disabled: item.disabled,
+      title: item.title,
       onClick: item.onClick,
       className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none disabled:opacity-50",
       children: [
@@ -1455,7 +1490,10 @@ function GenreActionBand({
     item.key
   ));
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
-    items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: renderItems(items) }),
+    (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      renderItems(items),
+      shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+    ] }),
     adminItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "section",
       {
@@ -1470,17 +1508,392 @@ function GenreActionBand({
   ] });
 }
 
+// src/genre-tree/GenreDetailExtras.tsx
+var import_ui8 = require("@behindthemusictree/ui");
+var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
+
+// src/genre-tree/ClampedText.tsx
+var import_react9 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ClampedText({ children, className: className2 = "" }) {
+  const ref = (0, import_react9.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react9.useState)(false);
+  const [overflows, setOverflows] = (0, import_react9.useState)(false);
+  (0, import_react9.useLayoutEffect)(() => {
+    const element = ref.current;
+    if (!element || expanded) return;
+    setOverflows(element.scrollHeight > element.clientHeight);
+  }, [children, expanded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((value) => !value),
+        className: "mt-1 text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
+        children: expanded ? "Show less" : "Show more"
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+var import_react10 = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_zod = require("zod");
+var import_fa4 = require("react-icons/fa");
+var import_ui7 = require("@behindthemusictree/ui");
+var import_auth2 = require("@behindthemusictree/app-kit/auth");
+var import_transport4 = require("@behindthemusictree/app-kit/transport");
+var import_transport5 = require("@behindthemusictree/app-kit/transport");
+var import_transport6 = require("@behindthemusictree/app-kit/transport");
+var import_player4 = require("@behindthemusictree/app-kit/player");
+var import_player5 = require("@behindthemusictree/app-kit/player");
+var import_popup5 = require("@behindthemusictree/app-kit/popup");
+var import_transport7 = require("@behindthemusictree/app-kit/transport");
+var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
+
+// src/genre-tree/MusicBrainzRecordingLink.tsx
+var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function MusicBrainzRecordingLink({
+  song,
+  children,
+  className: className2 = ""
+}) {
+  const url = (0, import_genre_tree3.musicBrainzRecordingUrl)(song);
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": `View ${song.title} on MusicBrainz`,
+      className: className2,
+      onClick: (event) => event.stopPropagation(),
+      children
+    }
+  );
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
+var import_track_noun5 = require("@behindthemusictree/app-kit/track-noun");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var CATALOGUE_PAGE_SIZE = 100;
+var SongPageSchema = (0, import_transport5.PaginatedResponseSchema)(import_genre_tree6.SongDetailedSchema).extend({
+  overallTotal: import_zod.z.number().nullable(),
+  page: import_zod.z.number().nullable(),
+  totalPages: import_zod.z.number().nullable()
+});
+var TEXT_CELL = "min-w-0 flex-1 truncate [@container(min-width:40rem)]:flex [@container(min-width:40rem)]:gap-2";
+var TITLE_CELL = "[@container(min-width:40rem)]:flex-[2] [@container(min-width:40rem)]:truncate";
+var COLUMN_CELL = "[@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:truncate";
+var ALBUM_CELL = `hidden [@container(min-width:40rem)]:block ${COLUMN_CELL}`;
+var SEPARATOR = "[@container(min-width:40rem)]:hidden";
+var nextCursor = (next) => {
+  const cursor = new URL(next).searchParams.get("cursor");
+  if (!cursor) throw new Error(`Songs next link has no cursor: ${next}`);
+  return cursor;
+};
+function GenrePlaylistTracks({
+  genreUuid,
+  genrePlaylist,
+  scope,
+  getBackendBaseUrl,
+  renderArtistLink,
+  renderSongLeading,
+  renderSongActions,
+  renderTracksToolbar,
+  artist = null
+}) {
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree7.useTrackList)();
+  const { session, sessionRestored } = (0, import_auth2.useSession)();
+  const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player4.usePlayer)();
+  const { showPopup } = (0, import_popup5.usePopup)();
+  const trackNoun = (0, import_track_noun5.useTrackNoun)();
+  const { uuid } = genrePlaylist;
+  const { fetch } = (0, import_transport4.useFetchWrapper)(getBackendBaseUrl);
+  const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
+    queryKey: scope === "me" ? import_genre_tree4.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid),
+    queryFn: async ({ pageParam }) => {
+      if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
+      const response = await fetch(
+        import_genre_tree5.libraryEndpoints.reference.songs.list(),
+        true,
+        false,
+        {},
+        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+      );
+      const parsed = (0, import_transport6.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
+      return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
+    },
+    initialPageParam: scope === "me" ? 1 : "",
+    getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
+    enabled: scope !== "me" || sessionRestored && !!session?.accessToken
+  });
+  const sentinelRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    const sentinel = sentinelRef.current;
+    if (!hasNextPage || isFetchingNextPage || !sentinel) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void fetchNextPage();
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  const pages = data?.pages ?? [];
+  const tracks = pages.flatMap((page) => page.tracks);
+  const total = pages[0]?.total ?? void 0;
+  const play = (startSongUuid) => {
+    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    started.catch((error) => {
+      console.error("Failed to play genre playlist:", error);
+      showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InternalErrorPopup, { errorCode: import_transport7.ErrorCode.CLIENT_UNKNOWN }));
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "gtv-info-panel-children", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
+      (0, import_track_noun5.capitalize)(trackNoun.plural),
+      total !== void 0 && ` (${total})`
+    ] }),
+    renderTracksToolbar?.(),
+    isPending ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { role: "alert", children: [
+      "Couldn't load ",
+      trackNoun.plural,
+      ".",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
+      tracks.map((track, index) => {
+        const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
+        const isCurrent = playerTrackObject?.track.id === track.uuid;
+        const isPlaying = isCurrent && playState === import_player5.PlayStates.PLAYING;
+        const text = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: TEXT_CELL, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: TITLE_CELL, children: (0, import_genre_tree6.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_genre_tree8.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
+        ] });
+        const leading = renderSongLeading?.(track, index);
+        const actions = renderSongActions?.(track);
+        const isUnplayable = (0, import_genre_tree6.isSong)(track) && (0, import_genre_tree6.songUnplayableReason)(track) !== null;
+        if (isUnplayable) {
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
+            leading,
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: true,
+                "aria-disabled": "true",
+                "aria-label": label,
+                className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa4.FaPlay, { size: 10 })
+              }
+            ),
+            text,
+            actions
+          ] }, track.uuid);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "li",
+          {
+            className: `group flex min-h-8 items-center gap-1 rounded px-1 hover:bg-[var(--color-neutral-100)] ${isCurrent ? "font-medium text-[var(--color-primary)]" : ""}`,
+            children: [
+              leading,
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
+                  className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== import_player5.PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
+                  onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
+                  children: isCurrent && playState === import_player5.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa4.FaPlay, { size: 10 })
+                }
+              ),
+              text,
+              actions
+            ]
+          },
+          track.uuid
+        );
+      }),
+      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
+    ] })
+  ] });
+}
+
+// src/genre-tree/GenreDetailExtras.tsx
+var import_track_noun6 = require("@behindthemusictree/app-kit/track-noun");
+var import_si2 = require("react-icons/si");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function GenreDetailExtras({
+  genreUuid,
+  genrePlaylist,
+  wikidataId,
+  scope,
+  getBackendBaseUrl,
+  criteriaOverviewSchema,
+  renderGenreDetailExtras,
+  renderArtistLink,
+  renderSummary,
+  renderEssentialTracks,
+  family,
+  ...trackSlots
+}) {
+  const trackNoun = (0, import_track_noun6.useTrackNoun)();
+  const { data: overview, isPending } = (0, import_genre_tree9.useFetchGenreOverview)(
+    genreUuid,
+    scope,
+    getBackendBaseUrl,
+    criteriaOverviewSchema
+  );
+  if (isPending) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.Skeleton, { className: "h-4 w-3/4" })
+      ] }),
+      family
+    ] });
+  }
+  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: family });
+  const { summary, summarySourceUrl, essentialSongs } = overview;
+  const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "gtv-info-panel-children-title", children: "Links" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs", children: [
+        summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          "a",
+          {
+            href: summarySourceUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+              "Wikipedia"
+            ]
+          }
+        ),
+        wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          "a",
+          {
+            href: wikidataUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+              "Wikidata"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid)
+    ] }),
+    family,
+    renderGenreDetailExtras?.(overview),
+    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
+        "Essential ",
+        trackNoun.plural
+      ] }),
+      essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1", children: "\u2014" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      GenrePlaylistTracks,
+      {
+        genreUuid,
+        genrePlaylist,
+        scope,
+        getBackendBaseUrl,
+        renderArtistLink,
+        ...trackSlots
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/GenreInfoPanelBody.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react11 = require("react");
+function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
+  const { isPlaying, setIsPlaying } = (0, import_player6.usePlayer)();
+  const isCurrentTrackList = playback.playingNodeId === genrePlaylist.uuid;
+  const handlePlayPause = () => {
+    if (isCurrentTrackList) {
+      setIsPlaying(!isPlaying);
+      return;
+    }
+    playback.play(genrePlaylist).catch((error) => {
+      console.error("Failed to load genre playlist tracks:", error);
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    GenreActionBand,
+    {
+      ...bandProps,
+      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
+      isPlaying: isCurrentTrackList && isPlaying
+    }
+  );
+}
+function GenreInfoPanelBody({
+  toolbar,
+  family,
+  genreUuid,
+  genrePlaylist,
+  wikidataId,
+  scope,
+  getBackendBaseUrl,
+  playback,
+  band,
+  extras
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    toolbar,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    /* @__PURE__ */ (0, import_react11.createElement)(
+      GenreDetailExtras,
+      {
+        ...extras,
+        key: genreUuid,
+        family,
+        genreUuid,
+        genrePlaylist,
+        wikidataId,
+        scope,
+        getBackendBaseUrl
+      }
+    )
+  ] });
+}
+
 // src/genre-tree/PanelEdgeTab.tsx
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var buttonClassName = "flex h-12 w-full items-center justify-center p-0 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-primary)]";
-function PanelEdgeTab({ side, edge, center, controls, className }) {
+function PanelEdgeTab({ side, edge, center, controls, className: className2 }) {
   if (!edge && !center) return null;
   const isLeft = side === "left";
-  const EdgeIcon = isLeft ? import_lucide_react9.ChevronLeft : import_lucide_react9.ChevronRight;
-  const CenterIcon = isLeft ? import_lucide_react9.ChevronRight : import_lucide_react9.ChevronLeft;
-  const renderButton = (action, icon) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const EdgeIcon = isLeft ? import_lucide_react12.ChevronLeft : import_lucide_react12.ChevronRight;
+  const CenterIcon = isLeft ? import_lucide_react12.ChevronRight : import_lucide_react12.ChevronLeft;
+  const renderButton = (action, icon) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "button",
     {
       type: "button",
@@ -1493,30 +1906,43 @@ function PanelEdgeTab({ side, edge, center, controls, className }) {
       children: icon
     }
   );
-  const edgeButton = edge && renderButton(edge, /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EdgeIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
-  const centerButton = center && renderButton(center, /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CenterIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const edgeButton = edge && renderButton(edge, /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EdgeIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const centerButton = center && renderButton(center, /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CenterIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
   const buttons = isLeft ? [edgeButton, centerButton] : [centerButton, edgeButton];
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: (0, import_tailwind_merge.twMerge)(
         "panel-edge-tab flex w-[var(--layout-edge-tab-w)] flex-col overflow-hidden bg-[var(--color-surface)] shadow-[0_1px_2px_rgba(60,64,67,0.3),0_2px_6px_2px_rgba(60,64,67,0.15)] [clip-path:inset(-0.5rem_-0.5rem_-0.5rem_0)]",
         isLeft ? "rounded-r-lg" : "rounded-l-lg [clip-path:inset(-0.5rem_0_-0.5rem_-0.5rem)]",
-        className
+        className2
       ),
       children: [
         buttons[0],
-        buttons[0] && buttons[1] && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "presentation", className: "h-px shrink-0 bg-[var(--color-border)]" }),
+        buttons[0] && buttons[1] && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "presentation", className: "h-px shrink-0 bg-[var(--color-border)]" }),
         buttons[1]
       ]
     }
   );
 }
 
+// src/genre-tree/useLeftDetailPanelLayout.ts
+var import_react12 = require("react");
+function useLeftDetailPanelLayout(isPanelShown, enabled = true) {
+  (0, import_react12.useEffect)(() => {
+    if (!enabled || isPanelShown) return void 0;
+    const root = document.documentElement;
+    root.style.setProperty("--layout-left-w", "0px");
+    return () => {
+      root.style.removeProperty("--layout-left-w");
+    };
+  }, [enabled, isPanelShown]);
+}
+
 // src/genre-tree/ChangeParentPopup.tsx
-var import_react8 = require("react");
-var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1525,9 +1951,9 @@ function ChangeParentPopup({
   onClose,
   onParentChanged
 }) {
-  const { mutate, isPending, formErrors } = (0, import_genre_tree11.useUpdateGenre)(scope, getBackendBaseUrl);
-  const candidates = (0, import_react8.useMemo)(
-    () => (0, import_genre_tree11.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
+  const { mutate, isPending, formErrors } = (0, import_genre_tree10.useUpdateGenre)(scope, getBackendBaseUrl);
+  const candidates = (0, import_react13.useMemo)(
+    () => (0, import_genre_tree10.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
   const handleSelect = (newParent) => {
@@ -1544,19 +1970,19 @@ function ChangeParentPopup({
       }
     );
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1564,32 +1990,32 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_ui15 = require("@behindthemusictree/ui");
-var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui14 = require("@behindthemusictree/ui");
+var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistHeader.tsx
 var import_ui10 = require("@behindthemusictree/ui");
 
 // src/genre-tree/artist/ArtistLinks.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_si = require("react-icons/si");
+var import_lucide_react13 = require("lucide-react");
+var import_si3 = require("react-icons/si");
 var import_ui9 = require("@behindthemusictree/ui");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var LINK_KINDS = {
-  official: { label: "Official website", Icon: import_lucide_react10.Globe },
-  wikipedia: { label: "Wikipedia", Icon: import_si.SiWikipedia },
-  wikidata: { label: "Wikidata", Icon: import_si.SiWikidata },
-  spotify: { label: "Spotify", Icon: import_si.SiSpotify },
-  youtube: { label: "YouTube", Icon: import_si.SiYoutube },
-  bandcamp: { label: "Bandcamp", Icon: import_si.SiBandcamp },
-  soundcloud: { label: "SoundCloud", Icon: import_si.SiSoundcloud },
-  discogs: { label: "Discogs", Icon: import_si.SiDiscogs },
-  social: { label: "Social", Icon: import_lucide_react10.Share2 }
+  official: { label: "Official website", Icon: import_lucide_react13.Globe },
+  wikipedia: { label: "Wikipedia", Icon: import_si3.SiWikipedia },
+  wikidata: { label: "Wikidata", Icon: import_si3.SiWikidata },
+  spotify: { label: "Spotify", Icon: import_si3.SiSpotify },
+  youtube: { label: "YouTube", Icon: import_si3.SiYoutube },
+  bandcamp: { label: "Bandcamp", Icon: import_si3.SiBandcamp },
+  soundcloud: { label: "SoundCloud", Icon: import_si3.SiSoundcloud },
+  discogs: { label: "Discogs", Icon: import_si3.SiDiscogs },
+  social: { label: "Social", Icon: import_lucide_react13.Share2 }
 };
 function socialLabel(url) {
   try {
@@ -1609,14 +2035,14 @@ function artistLinks(artist) {
     links.push({
       key: "musicbrainz",
       url: `https://musicbrainz.org/artist/${artist.musicbrainzArtistId}`,
-      Icon: import_si.SiMusicbrainz,
+      Icon: import_si3.SiMusicbrainz,
       label: "MusicBrainz"
     });
   }
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui9.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -1627,7 +2053,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1637,35 +2063,35 @@ function ArtistHeader({ artist }) {
   const years = formatYears(artist.beginYear, artist.endYear, artist.ended);
   if (years) fields.push({ label: "Active", value: years });
   const links = artistLinks(artist);
-  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui10.FieldList, { items: fields });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui10.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
       "Photo: ",
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
 var import_ui11 = require("@behindthemusictree/ui");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui11.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1673,9 +2099,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
     const detailsText = details.filter(Boolean).join(" \xB7 ");
     return (
       // A member can have several periods in the same group.
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
-        detailsText && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -1686,9 +2112,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
 function ArtistMembers({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
   const isCurrent = (membership) => !membership.ended && membership.endYear === null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_ui11.PanelSection, { title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_ui11.PanelSection, { title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       MembershipList,
       {
         title: "Past",
@@ -1701,7 +2127,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 
 // src/genre-tree/artist/ArtistDiscography.tsx
 var import_ui12 = require("@behindthemusictree/ui");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -1721,77 +2147,85 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui12.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui12.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
   }) });
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_react9 = require("react");
+var import_react14 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
-var import_lucide_react11 = require("lucide-react");
-var import_ui14 = require("@behindthemusictree/ui");
-var import_player9 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
+var import_lucide_react14 = require("lucide-react");
+var import_ui13 = require("@behindthemusictree/ui");
+var import_player10 = require("@behindthemusictree/app-kit/player");
+var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport8 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
-var import_player8 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
+var import_player9 = require("@behindthemusictree/app-kit/player");
+var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/TrackPositionPlayPause.tsx
-var import_fa6 = require("react-icons/fa");
-var import_player6 = require("@behindthemusictree/app-kit/player");
+var import_fa5 = require("react-icons/fa");
 var import_player7 = require("@behindthemusictree/app-kit/player");
-var import_ui13 = require("@behindthemusictree/ui");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function TrackPositionPlayPause({ position, uuid, handlePlayPauseClick }) {
-  const { playerTrackObject, playState } = (0, import_player6.usePlayer)();
+var import_player8 = require("@behindthemusictree/app-kit/player");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function TrackPositionPlayPause({
+  position,
+  uuid,
+  handlePlayPauseClick,
+  isSelected = false
+}) {
+  const { playerTrackObject, playbackConfirmedTrackId, playState, isLoading: isPlayerLoading } = (0, import_player7.usePlayer)();
   const isThisTrack = playerTrackObject?.track.id === uuid;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  const isConfirmedPlayable = playbackConfirmedTrackId === uuid;
+  const isAwaitingPlayback = (isSelected || isThisTrack) && !isConfirmedPlayable && !(isThisTrack && playerTrackObject?.loadError) && (!isThisTrack || isPlayerLoading || playState === import_player8.PlayStates.LOADING || playState === import_player8.PlayStates.PLAYING);
+  const isPlaying = isThisTrack && isConfirmedPlayable && playState === import_player8.PlayStates.PLAYING;
+  const isPaused = isThisTrack && isConfirmedPlayable && playState === import_player8.PlayStates.PAUSED;
+  const isCurrentTrackActive = isPlaying || isPaused;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
-      className: "track-position-play-pause flex items-center justify-center text-lg w-16 cursor-pointer",
+      className: "track-position-play-pause relative flex items-center justify-center gap-2 text-lg w-16 cursor-pointer",
       style: { minWidth: "4rem", maxWidth: "4rem" },
       onClick: handlePlayPauseClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "group-hover:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: isThisTrack && playState !== import_player7.PlayStates.STOPPED ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex space-x-1 items-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              className: `w-playingbar bg-[var(--color-green-500)] h-3 origin-bottom ${playState === import_player7.PlayStates.PLAYING ? "animate-scale-pulse" : ""}`
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              className: `w-playingbar bg-[var(--color-green-500)] h-4 origin-bottom ${playState === import_player7.PlayStates.PLAYING ? "animate-scale-pulse delay-200" : ""}`,
-              style: { animationDelay: "0.2s" }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              className: `w-playingbar bg-[var(--color-green-500)] h-3 origin-bottom ${playState === import_player7.PlayStates.PLAYING ? "animate-scale-pulse delay-400" : ""}`,
-              style: { animationDelay: "0.3s" }
-            }
-          )
-        ] }) : position }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden group-hover:flex items-center justify-center", children: isThisTrack && playState === import_player7.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui13.RingLoader, { size: 16 }) : isThisTrack && playState === import_player7.PlayStates.PLAYING ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fa6.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fa6.FaPlay, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "span",
+          {
+            className: "track-position-play-pause__bars",
+            "data-playing": isPlaying,
+            role: "img",
+            "aria-label": isPlaying ? "Playing" : "Paused",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "track-position-play-pause__bar" })
+            ]
+          }
+        ) : position }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
+            "aria-hidden": "true",
+            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fa5.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fa5.FaPlay, {})
+          }
+        )
       ]
     }
   );
 }
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
+var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree13 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function TrackItem({
   track,
   position,
@@ -1799,26 +2233,27 @@ function TrackItem({
   renderActions,
   renderArtistLink
 }) {
-  const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player8.usePlayer)();
-  const { trackList, toTrackAtPosition } = (0, import_genre_tree12.useTrackList)();
+  const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player9.usePlayer)();
+  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree11.useTrackList)();
   const scope = trackList?.origin?.scope ?? null;
-  const unplayableReason = (0, import_genre_tree13.isSong)(track) ? (0, import_genre_tree13.songUnplayableReason)(track) : null;
+  const isCurrentTrack = playerTrackObject?.track.id === track.uuid;
+  const hasPlaybackError = isCurrentTrack && !!playerTrackObject?.loadError;
+  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree12.isSong)(track) && (0, import_genre_tree12.songUnplayableReason)(track) !== null;
   const handlePlayPauseClick = (event) => {
     event.stopPropagation();
-    if (playerTrackObject && playerTrackObject.track.id === track.uuid) {
+    if (isCurrentTrack) {
       handlePlayPauseAction();
     } else if (scope != null) {
       toTrackAtPosition(position);
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
-      className: `track-item flex h-14 text-[var(--color-text)] ${unplayableReason ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
-      title: unplayableReason ?? void 0,
+      className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
       children: [
-        unplayableReason ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        isUnplayable ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -1826,18 +2261,21 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TrackPositionPlayPause, { position, uuid: track.uuid, handlePlayPauseClick }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex max-w-full items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: track.title }),
-            (0, import_genre_tree13.isSong)(track) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MusicBrainzRecordingLink, { song: track })
-          ] }),
-          track.artists && track.artists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_genre_tree14.ArtistNames, { artists: track.artists, renderArtistLink }) }) : "",
-          unplayableReason && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UnplayableReason, { reason: unplayableReason }) })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          TrackPositionPlayPause,
+          {
+            position,
+            uuid: track.uuid,
+            handlePlayPauseClick,
+            isSelected: selectedTrack?.uuid === track.uuid
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: (0, import_genre_tree12.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
+          track.artists && track.artists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_genre_tree13.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "album-name items-start justify-center w-1/3 min-w-0 ml-2 max-w-full truncate text-[var(--color-text-muted)]", children: track.album ? track.album.name : "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "genre-name-container flex items-center justify-end w-1/6 min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "genre-name font-bold p-1 border border-[var(--color-text-muted)] text-xs max-w-full truncate", children: track.genre.name }) : "" }),
-        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -1845,28 +2283,28 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+        renderActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
       ]
     }
   );
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport8.PaginatedResponseSchema)(import_genre_tree15.SongDetailedSchema);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var SongPageSchema2 = (0, import_transport8.PaginatedResponseSchema)(import_genre_tree14.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
-  const [page, setPage] = (0, import_react9.useState)(1);
-  const [ordering, setOrdering] = (0, import_react9.useState)("title");
+  const [page, setPage] = (0, import_react14.useState)(1);
+  const [ordering, setOrdering] = (0, import_react14.useState)("title");
   const { fetch } = (0, import_transport8.useFetchWrapper)(getBackendBaseUrl);
-  const { playNewTrackListFromArtist } = (0, import_genre_tree15.useTrackList)();
-  const { playerTrackObject } = (0, import_player9.usePlayer)();
+  const { playNewTrackListFromArtist } = (0, import_genre_tree14.useTrackList)();
+  const { playerTrackObject } = (0, import_player10.usePlayer)();
   const { data, isPending, isError } = (0, import_transport8.useQueryWithParse)({
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
-    queryFn: () => fetch(import_genre_tree15.libraryEndpoints.reference.songs.list(), true, false, void 0, {
+    queryFn: () => fetch(import_genre_tree14.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
       ordering,
       page
@@ -1881,25 +2319,25 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
   });
   const handleRowClickCapture = (event, song) => {
     if (!(event.target instanceof Element) || !event.target.closest(".track-position-play-pause")) return;
-    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree15.songUnplayableReason)(song) !== null) return;
+    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree14.songUnplayableReason)(song) !== null) return;
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui14.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui14.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => void play(),
           className: "flex w-fit items-center gap-1.5 px-3 py-1 text-xs font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react11.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react14.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -1914,7 +2352,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
         sort.ordering
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       TrackItem,
       {
         track: song,
@@ -1922,21 +2360,23 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
         renderArtistLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui14.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function useArtistPanel({
   uuid,
+  scope,
   getBackendBaseUrl,
+  getShareUrl,
   renderArtistLink,
   expanded,
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree16.useArtist)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree15.useArtist)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -1945,38 +2385,41 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui15.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui15.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui15.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui15.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui15.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui15.Skeleton, { className: "h-16" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
+      const shareTarget = scope ? { kind: "artist", uuid: artist.uuid, name: artist.name, scope } : void 0;
+      const shareUrl = shareTarget ? getShareUrl?.(shareTarget) : void 0;
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-          artist.image && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ArtistHeader, { artist }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
-          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          shareUrl && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
+          artist.image && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArtistHeader, { artist }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -1985,7 +2428,7 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
@@ -1993,28 +2436,28 @@ function useArtistPanel({
 
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md2 = require("react-icons/md");
-var import_ui16 = require("@behindthemusictree/ui");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_ui15 = require("@behindthemusictree/ui");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_ui16.SegmentedControl,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_ui15.SegmentedControl,
     {
       "aria-label": "Size nodes by",
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_md2.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_md2.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_md2.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_md2.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
       ]
     }
   );
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var PREVIOUS_BUTTON_CSS = `
 .genre-tree-view .search-overlay .gtv-info-panel-previous { display: none; }
 .genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search input { padding-left: 2.75rem; }
@@ -2024,27 +2467,6 @@ var PREVIOUS_BUTTON_CSS = `
   .genre-search-previous { animation: genre-tree-view-previous-in 200ms ease-out; }
 }
 `;
-function GenreNodeActionBand({ genrePlaylist, scope, playback, ...bandProps }) {
-  const { isPlaying, setIsPlaying } = (0, import_player10.usePlayer)();
-  const isCurrentTrackList = playback.playingNodeId === genrePlaylist.uuid;
-  const handlePlayPause = () => {
-    if (isCurrentTrackList) {
-      setIsPlaying(!isPlaying);
-      return;
-    }
-    playback.play(genrePlaylist).catch((error) => {
-      console.error("Failed to load genre playlist tracks:", error);
-    });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    GenreActionBand,
-    {
-      ...bandProps,
-      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
-      isPlaying: isCurrentTrackList && isPlaying
-    }
-  );
-}
 var NO_POP_ROOT_TITLE = "This genre tree has no 'Mainstream Pop' root yet";
 var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)] [&_.gtv-info-panel--overlay]:[--gtv-info-panel-header-inset:0px]";
 function GenreTreeView({
@@ -2058,15 +2480,16 @@ function GenreTreeView({
   selectedNodeId: controlledSelectedNodeId,
   onSelectedNodeIdChange,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   readOnly = false,
-  className,
+  className: className2,
   showDisplayOptions = true,
   showAddRoot = true,
   allowWheelRotation: controlledAllowWheelRotation,
   criteriaOverviewSchema,
   renderGenreDetailExtras,
-  controlsOrientation = "horizontal",
+  floatingControlsLeading,
   sizeMetric: controlledSizeMetric,
   onSizeMetricChange,
   renderArtistLink,
@@ -2074,6 +2497,7 @@ function GenreTreeView({
   onArtistUuidChange,
   artistExpanded: controlledArtistExpanded,
   onArtistExpandedChange,
+  getShareUrl,
   artistSearch = true,
   onArtistSelect,
   artistSearchBaseUrl,
@@ -2091,12 +2515,14 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react10.useState)(null);
+  const getShareUrlRef = (0, import_react15.useRef)(getShareUrl);
+  getShareUrlRef.current = getShareUrl;
+  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react15.useState)(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react10.useState)("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react15.useState)("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
-  const deferredSizeMetric = (0, import_react10.useDeferredValue)(sizeMetric);
+  const deferredSizeMetric = (0, import_react15.useDeferredValue)(sizeMetric);
   const changeSizeMetric = (metric) => {
     if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
     onSizeMetricChange?.(metric);
@@ -2123,7 +2549,7 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree18.useGenreTreeViewState)({
+  } = (0, import_genre_tree17.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
@@ -2132,25 +2558,41 @@ function GenreTreeView({
     criteriaOverviewSchema,
     artistUuid
   });
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree18.genreUpdateMutationKey }) > 0;
+  const restoreRevision = viewportRestore?.revision;
+  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react15.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  let restoreRootUuid = stackedRestoreOwner.rootUuid;
+  if (stackedRestoreOwner.revision !== restoreRevision) {
+    restoreRootUuid = selectedGenrePlaylist?.root.uuid;
+    setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
+  } else if (restoreRootUuid === void 0 && selectedGenrePlaylist) {
+    restoreRootUuid = selectedGenrePlaylist.root.uuid;
+    setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
+  }
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree17.genreUpdateMutationKey }) > 0;
+  const { mutate: updateGenre } = (0, import_genre_tree17.useUpdateGenre)(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
-  const artistResult = (0, import_genre_tree18.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const isArtistFiltered = artistUuid !== null;
+  const canSizeByViews = !isArtistFiltered && hasViewsCount(visibleGenrePlaylists);
+  const artistResult = (0, import_genre_tree17.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
-  const filterArtist = (0, import_react10.useMemo)(
+  const filterArtist = (0, import_react15.useMemo)(
     () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
     [artistUuid, filterArtistName]
   );
+  const hasSelectedGenreNode = selectedGenrePlaylist !== void 0 && visibleGenrePlaylists.some(({ uuid }) => uuid === selectedGenrePlaylist.uuid);
   const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: visibleGenrePlaylists, artist: filterArtist });
   const openArtist = (uuid) => {
     if (selectedNodeId !== null) clearSelection();
     changeArtist(uuid);
   };
-  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react10.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react15.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const artistPanel = useArtistPanel({
     uuid: artistUuid,
+    scope,
     getBackendBaseUrl: artistBaseUrl,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    getShareUrl: getShareUrlRef.current,
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
     expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
     onExpandedChange: (on) => {
       if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
@@ -2158,10 +2600,10 @@ function GenreTreeView({
     },
     onClose: () => changeArtist(null)
   });
-  const builtInArtistPanel = overlayPanel || selectedNodeId !== null ? void 0 : artistPanel;
+  const builtInArtistPanel = overlayPanel || hasSelectedGenreNode ? void 0 : artistPanel;
   const activeOverlayPanel = overlayPanel ?? (builtInArtistPanel && { ...builtInArtistPanel, hideTitle: true, hideClose: true });
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react10.useState)(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react10.useState)(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react15.useState)(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react15.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2172,18 +2614,11 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setUncontrolledCollapsed(false);
   }, [selectedNodeId, artistUuid]);
-  const isDetailHidden = isCollapsed || !selectedNodeId && !activeOverlayPanel;
-  (0, import_react10.useEffect)(() => {
-    if (placement !== "regions" || !isDetailHidden) return void 0;
-    const root = document.documentElement;
-    root.style.setProperty("--layout-left-w", "0px");
-    return () => {
-      root.style.removeProperty("--layout-left-w");
-    };
-  }, [placement, isDetailHidden]);
+  const isDetailHidden = isCollapsed || !hasSelectedGenreNode && !activeOverlayPanel;
+  useLeftDetailPanelLayout(!isDetailHidden, placement === "regions");
   const detailOverlay = placement === "regions" && activeOverlayPanel?.onExpandedChange ? activeOverlayPanel : void 0;
   const detailExpanded = detailOverlay ? !!detailOverlay.expanded : isExpanded;
   const onDetailExpandedChange = detailOverlay ? detailOverlay.onExpandedChange : changeExpanded;
@@ -2195,29 +2630,38 @@ function GenreTreeView({
     hideExpandButton: placement === "regions" ? true : void 0,
     overlayPanel: detailOverlay ? { ...detailOverlay, collapsed: isCollapsed, hideExpandButton: true } : activeOverlayPanel
   };
-  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react10.useState)(false);
+  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react15.useState)(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
-  const rootRef = (0, import_react10.useRef)(null);
+  const rootRef = (0, import_react15.useRef)(null);
   const handlePrevious = () => {
     rootRef.current?.querySelector(".search-overlay .gtv-info-panel-previous")?.click();
   };
-  const { showPopup, hidePopup } = (0, import_popup5.usePopup)();
-  const [searchText, setSearchText] = (0, import_react10.useState)("");
-  const artistSearchResult = (0, import_genre_tree17.useArtistSearch)(artistBaseUrl, artistSearch ? searchText : "");
+  (0, import_react15.useEffect)(() => {
+    if (!isTreeReady || viewMode !== "pop-core" || !hasSelectedGenreNode || !selectedGenrePlaylist) return;
+    const root = rootRef.current;
+    const centerChip = root?.querySelector(".gtv-wheel-center-node .gtv-wheel-chip");
+    if (!centerChip || centerChip.getAttribute("aria-label") !== selectedGenrePlaylist.name) return;
+    const panelTitle = root?.querySelector(".gtv-info-panel-title");
+    if (panelTitle?.textContent?.trim().startsWith(selectedGenrePlaylist.name)) return;
+    centerChip.click();
+  }, [hasSelectedGenreNode, isTreeReady, selectedGenrePlaylist, viewMode]);
+  const { showPopup, hidePopup } = (0, import_popup6.usePopup)();
+  const [searchText, setSearchText] = (0, import_react15.useState)("");
+  const artistSearchResult = (0, import_genre_tree16.useArtistSearch)(artistBaseUrl, artistSearch ? searchText : "");
   const artistExtraResults = artistSearch ? {
     label: "Artists",
     items: artistSearchResult.artists.map((artist) => ({
       key: artist.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block truncate font-medium", children: [
           artist.name,
-          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
             " \xB7 ",
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -2243,31 +2687,52 @@ function GenreTreeView({
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = (0, import_react10.useRef)(void 0);
+  const zoomInRef = (0, import_react15.useRef)(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
-  const renderInfoPanelBody = (0, import_react10.useCallback)(
+  const renderInfoPanelBody = (0, import_react15.useCallback)(
     (node, { toolbar, ancestors, family }) => {
       const genrePlaylist = genrePlaylistByNodeId.get(node.id);
       const criteria = genrePlaylist?.criteria;
-      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
         toolbar,
         family
       ] }), aside: ancestors };
       const genreUuid = criteria.uuid;
+      const parentPlaylist = visibleGenrePlaylists.find(({ uuid }) => uuid === genrePlaylist.parent?.uuid);
+      const canToggleSide = !readOnly && parentPlaylist !== void 0 && parentPlaylist.parent === null;
+      const side = criteria.side ?? "core";
+      const shareTarget = {
+        kind: "genre",
+        genrePlaylistUuid: genrePlaylist.uuid,
+        name: criteria.name,
+        scope,
+        artistUuid
+      };
+      const shareUrl = getShareUrlRef.current?.(shareTarget) ?? void 0;
+      const popSibling = canToggleSide && side === "core" ? visibleGenrePlaylists.find(
+        (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
+      ) : void 0;
       return {
-        primary: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-          toolbar,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            GenreNodeActionBand,
-            {
+        primary: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          GenreInfoPanelBody,
+          {
+            toolbar,
+            family,
+            genreUuid,
+            genrePlaylist,
+            wikidataId: criteria.wikidataId,
+            scope,
+            getBackendBaseUrl,
+            playback,
+            band: {
               node,
-              genrePlaylist,
-              scope,
+              shareTarget: shareUrl ? shareTarget : void 0,
+              shareUrl,
               onZoomIn: zoomInRef.current,
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2279,18 +2744,12 @@ function GenreTreeView({
                   }
                 )
               ),
-              additionalActions,
-              playback
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            GenreDetailExtras,
-            {
-              family,
-              genreUuid,
-              genrePlaylist,
-              scope,
-              getBackendBaseUrl,
+              side,
+              onToggleSide: canToggleSide ? () => updateGenre({ uuid: genreUuid, data: { side: side === "pop" ? "core" : "pop" } }) : void 0,
+              toggleSideDisabledReason: popSibling ? `${popSibling.name} is already the pop side of ${parentPlaylist?.name}` : void 0,
+              additionalActions
+            },
+            extras: {
               criteriaOverviewSchema,
               renderGenreDetailExtras,
               renderArtistLink,
@@ -2300,10 +2759,9 @@ function GenreTreeView({
               renderSongLeading,
               renderSongActions,
               renderTracksToolbar
-            },
-            genreUuid
-          )
-        ] }),
+            }
+          }
+        ),
         aside: ancestors
       };
     },
@@ -2317,6 +2775,7 @@ function GenreTreeView({
       hidePopup,
       onParentChanged,
       visibleGenrePlaylists,
+      updateGenre,
       playback,
       filterArtist,
       scope,
@@ -2333,7 +2792,7 @@ function GenreTreeView({
   );
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
-  const detailTab = placement === "regions" && (selectedNodeId || detailOverlay) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const detailTab = placement === "regions" && (hasSelectedGenreNode || detailOverlay) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     PanelEdgeTab,
     {
       side: "left",
@@ -2341,25 +2800,14 @@ function GenreTreeView({
       center: detailExpanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : onDetailExpandedChange ? { label: "Extend panel", onClick: () => onDetailExpandedChange(true) } : null
     }
   ) : null;
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      GenreSearch,
-      {
-        genrePlaylists: visibleGenrePlaylists,
-        onSelect: handleGenreSearchSelect,
-        selectedName: selectedGenrePlaylist?.name ?? builtInArtistPanel?.title ?? null,
-        onClear: builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
-        onPrevious: handlePrevious,
-        onQueryChange: artistSearch ? setSearchText : void 0,
-        extraResults: artistExtraResults
-      }
-    ),
-    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const renderArtistFilter = () => {
+    if (isLoading || !filterArtist) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
-          className: "py-1 pl-3 pr-2 hover:underline",
+          className: "py-1 pl-3 pr-2 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] hover:underline",
           "aria-label": `Show artist ${filterArtist.name}`,
           onClick: () => {
             if (selectedNodeId !== null) clearSelection();
@@ -2367,86 +2815,174 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
-          className: "py-1 pl-1 pr-3 hover:text-[var(--color-text)]",
+          className: "py-1 pl-1 pr-3 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] hover:text-[var(--color-text)]",
           "aria-label": `Clear artist filter ${filterArtist.name}`,
           onClick: () => changeArtist(null),
           children: "\xD7"
         }
       )
-    ] }),
-    !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_ui17.SegmentedControl,
-      {
-        "aria-label": "Tree view mode",
-        value: viewMode,
-        onChange: setViewMode,
-        options: [
-          { value: "pop-core", label: "Pop/Core", disabled: !canShowPopCore, title: canShowPopCore ? void 0 : NO_POP_ROOT_TITLE },
-          { value: "wheel", label: "Wheel" },
-          { value: "stacked", label: "Stacked" },
-          { value: "outline", label: "Outline", disabled: !canShowPopCore, title: canShowPopCore ? void 0 : NO_POP_ROOT_TITLE }
-        ]
-      }
-    ),
-    !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      "div",
+    ] });
+  };
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      GenreSearch,
       {
-        className: "flex items-center gap-1",
-        role: "group",
-        "aria-label": "Tree display options",
-        children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_ui17.Button,
-          {
-            variant: allowWheelRotation ? "default" : "outline",
-            size: "sm",
-            onClick: toggleWheelRotation,
-            children: "Rotation"
-          }
-        )
+        genrePlaylists: visibleGenrePlaylists,
+        onSelect: handleGenreSearchSelect,
+        selectedName: selectedGenrePlaylist?.name ?? builtInArtistPanel?.title ?? null,
+        onClear: builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
+        onPrevious: handlePrevious,
+        onQueryChange: artistSearch ? setSearchText : void 0,
+        extraResults: artistExtraResults
       }
     ),
-    !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_ui17.IconTextButton,
-      {
-        icon: import_lucide_react12.Plus,
-        text: "Add root",
-        onClick: () => handleGenreCreationAction(null)
-      }
-    )
+    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
+      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_ui16.SegmentedControl,
+        {
+          "aria-label": "Tree view mode",
+          value: viewMode,
+          onChange: setViewMode,
+          options: [
+            { value: "pop-core", label: "Pop/Core", disabled: !canShowPopCore, title: canShowPopCore ? void 0 : NO_POP_ROOT_TITLE },
+            { value: "wheel", label: "Wheel" },
+            { value: "stacked", label: "Stacked" },
+            { value: "outline", label: "Outline", disabled: !canShowPopCore, title: canShowPopCore ? void 0 : NO_POP_ROOT_TITLE }
+          ]
+        }
+      ),
+      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "div",
+        {
+          className: "flex items-center gap-1",
+          role: "group",
+          "aria-label": "Tree display options",
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            import_ui16.Button,
+            {
+              variant: allowWheelRotation ? "default" : "outline",
+              size: "sm",
+              onClick: toggleWheelRotation,
+              children: "Rotation"
+            }
+          )
+        }
+      ),
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_ui16.IconTextButton,
+        {
+          icon: import_lucide_react15.Plus,
+          text: "Add root",
+          onClick: () => handleGenreCreationAction(null)
+        }
+      )
+    ] })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       ref: rootRef,
-      className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className].filter(Boolean).join(" "),
+      className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "div",
           {
-            className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "left-5 top-5"}`,
+            className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:top-[var(--layout-band-top)] max-md:flex-col max-md:items-stretch" : "left-5 top-5"}`,
             children: actions
           }
         ),
-        detailTab && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "div",
+          {
+            className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "top-5"}`,
+            children: renderArtistFilter()
+          }
+        ),
+        detailTab && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "div",
           {
-            className: `absolute top-1/2 z-30 -translate-y-1/2 transition-[opacity,visibility] duration-150 ease-out ${isTreeReady ? "opacity-100" : "pointer-events-none invisible opacity-0"} ${detailExpanded ? "right-[calc(var(--layout-center-right)-var(--layout-edge-tab-w))]" : isCollapsed ? "left-0" : "left-[calc(var(--layout-gutter)+var(--layout-left-w))]"}`,
+            className: `absolute top-1/2 z-30 -translate-y-1/2 max-md:hidden transition-[opacity,visibility] duration-150 ease-out ${isTreeReady ? "opacity-100" : "pointer-events-none invisible opacity-0"} ${detailExpanded ? "right-[calc(var(--layout-center-right)-var(--layout-edge-tab-w))]" : isCollapsed ? "left-0" : "left-[calc(var(--layout-gutter)+var(--layout-left-w))]"}`,
             children: detailTab
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "tree-view-container flex-1 min-w-0 flex flex-col h-full", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
-          // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
-          // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
-          // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
-          // The panel's own Zoom in button is hidden: the search bar carries it.
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            GenrePlaylistTreeWheel,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+            // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
+            // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
+            // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
+            // The panel's own Zoom in button is hidden: the search bar carries it.
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              GenrePlaylistTreeWheel,
+              {
+                scope,
+                genrePlaylists: visibleGenrePlaylists,
+                handleGenreCreationAction,
+                handleGenreRenameAction,
+                additionalActions,
+                onSelectedNodeChange: handleSelectedNodeChange,
+                hideInfoPanelClose: true,
+                hideInfoPanelTitle: true,
+                onNodeHover: handleNodeHover,
+                renderInfoPanelBody,
+                playback,
+                selectedNodeId,
+                readOnly,
+                allowWheelRotation,
+                sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
+                busy,
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  floatingControlsLeading,
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                ] }) : void 0,
+                defaultViewport,
+                viewportRestore,
+                onViewportChange,
+                ...infoPanelCuration
+              }
+            ) }) })
+          ) : viewMode === "pop-core" ? (
+            // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              GenrePlaylistTreeWheelRadialPopCore,
+              {
+                scope,
+                genrePlaylists: visibleGenrePlaylists,
+                handleGenreCreationAction,
+                handleGenreRenameAction,
+                additionalActions,
+                onSelectedNodeChange: handleSelectedNodeChange,
+                hideInfoPanelClose: true,
+                hideInfoPanelTitle: true,
+                onNodeHover: handleNodeHover,
+                renderInfoPanelBody,
+                playback,
+                selectedNodeId,
+                readOnly,
+                allowWheelRotation,
+                sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
+                busy,
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  floatingControlsLeading,
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                ] }) : void 0,
+                defaultViewport,
+                viewportRestore,
+                onViewportChange,
+                ...infoPanelCuration,
+                ...focus
+              }
+            ) }) })
+          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            GenrePlaylistTreeWheelRadialPopCore,
             {
+              outline: true,
               scope,
               genrePlaylists: visibleGenrePlaylists,
               handleGenreCreationAction,
@@ -2460,127 +2996,192 @@ function GenreTreeView({
               playback,
               selectedNodeId,
               readOnly,
-              allowWheelRotation,
-              controlsOrientation,
-              sizeMetric: filterArtist ? "songs" : deferredSizeMetric,
-              busy,
-              floatingControlsLeading: filterArtist ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric }),
-              defaultViewport,
-              onViewportChange,
               ...infoPanelCuration
             }
-          ) }) })
-        ) : viewMode === "pop-core" ? (
-          // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            GenrePlaylistTreeWheelRadialPopCore,
-            {
-              scope,
-              genrePlaylists: visibleGenrePlaylists,
-              handleGenreCreationAction,
-              handleGenreRenameAction,
-              additionalActions,
-              onSelectedNodeChange: handleSelectedNodeChange,
-              hideInfoPanelClose: true,
-              hideInfoPanelTitle: true,
-              onNodeHover: handleNodeHover,
-              renderInfoPanelBody,
-              playback,
-              selectedNodeId,
-              readOnly,
-              allowWheelRotation,
-              controlsOrientation,
-              sizeMetric: filterArtist ? "songs" : deferredSizeMetric,
-              busy,
-              floatingControlsLeading: filterArtist ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric }),
-              defaultViewport,
-              onViewportChange,
-              ...infoPanelCuration,
-              ...focus
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+            ([uuid, genrePlaylistTreePerRoot], rootIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                "div",
+                {
+                  className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                    GenrePlaylistTreePerRoot,
+                    {
+                      scope,
+                      rootUuid: uuid,
+                      genrePlaylistTreePerRoot,
+                      handleGenreCreationAction,
+                      handleGenreRenameAction,
+                      additionalActions,
+                      onSelectedNodeChange: handleSelectedNodeChange,
+                      hideInfoPanelClose: true,
+                      hideInfoPanelTitle: true,
+                      onNodeHover: handleNodeHover,
+                      renderInfoPanelBody,
+                      playback,
+                      selectedNodeId: uuid === selectedGenrePlaylist?.root.uuid ? selectedNodeId : null,
+                      readOnly,
+                      wheelZoom: "modifier",
+                      defaultViewport: uuid === selectedGenrePlaylist?.root.uuid ? defaultViewport : void 0,
+                      viewportRestore: uuid === selectedGenrePlaylist?.root.uuid && uuid === restoreRootUuid ? viewportRestore : void 0,
+                      onViewportChange: uuid === selectedGenrePlaylist?.root.uuid ? onViewportChange : void 0,
+                      ...infoPanelCuration,
+                      overlayPanel: rootIndex === 0 ? activeOverlayPanel : void 0
+                    }
+                  ) })
+                },
+                uuid
+              );
             }
-          ) }) })
-        ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          GenrePlaylistTreeWheelRadialPopCore,
-          {
-            outline: true,
-            scope,
-            genrePlaylists: visibleGenrePlaylists,
-            handleGenreCreationAction,
-            handleGenreRenameAction,
-            additionalActions,
-            onSelectedNodeChange: handleSelectedNodeChange,
-            hideInfoPanelClose: true,
-            hideInfoPanelTitle: true,
-            onNodeHover: handleNodeHover,
-            renderInfoPanelBody,
-            playback,
-            selectedNodeId,
-            readOnly,
-            ...infoPanelCuration
-          }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
-          ([uuid, genrePlaylistTreePerRoot], rootIndex) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "div",
-              {
-                className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                  GenrePlaylistTreePerRoot,
-                  {
-                    scope,
-                    rootUuid: uuid,
-                    genrePlaylistTreePerRoot,
-                    handleGenreCreationAction,
-                    handleGenreRenameAction,
-                    additionalActions,
-                    onSelectedNodeChange: handleSelectedNodeChange,
-                    hideInfoPanelClose: true,
-                    hideInfoPanelTitle: true,
-                    onNodeHover: handleNodeHover,
-                    renderInfoPanelBody,
-                    playback,
-                    selectedNodeId: uuid === selectedGenrePlaylist?.root.uuid ? selectedNodeId : null,
-                    readOnly,
-                    wheelZoom: "modifier",
-                    controlsOrientation,
-                    defaultViewport: uuid === selectedGenrePlaylist?.root.uuid ? defaultViewport : void 0,
-                    onViewportChange: uuid === selectedGenrePlaylist?.root.uuid ? onViewportChange : void 0,
-                    ...infoPanelCuration,
-                    overlayPanel: rootIndex === 0 ? activeOverlayPanel : void 0
-                  }
-                ) })
-              },
-              uuid
-            );
-          }
-        ) }) }) })
+          ) })
+        ] }) })
       ]
     }
   );
 }
 
-// src/genre-tree/index.ts
+// src/genre-tree/GenreDetailPanel.tsx
+var import_react16 = require("react");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
+var import_ui17 = require("@behindthemusictree/ui");
+var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ITEM_COUNT_LABEL = "Songs";
+var RELATIVE_ITEM_COUNT = 1;
+function toNode(genre, parentId) {
+  return {
+    id: genre.uuid,
+    parentId,
+    name: genre.name,
+    itemCount: RELATIVE_ITEM_COUNT,
+    side: genre.side ?? void 0,
+    wikidataId: genre.wikidataId
+  };
+}
+function GenreDetailPanel({
+  genreUuid,
+  scope,
+  getBackendBaseUrl,
+  onClose,
+  onSelectGenre,
+  onZoomIn,
+  shareUrl,
+  shareTarget,
+  collapsed,
+  expanded,
+  onExpandedChange,
+  extras
+}) {
+  const { data: detail, isPending, isError } = (0, import_genre_tree18.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
+  const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: [] });
+  const view = (0, import_react16.useMemo)(() => {
+    if (!detail) return null;
+    const rootColor = (0, import_genre_tree_view5.getGenreTreeColor)(detail.root.wikidataId);
+    const relative = (genre, parentId) => ({
+      node: toNode(genre, parentId),
+      fill: (0, import_genre_tree_view5.tintSurface)(rootColor),
+      textColor: import_genre_tree_view5.TEXT_COLOR
+    });
+    const ancestors = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
+    return {
+      node: {
+        id: detail.uuid,
+        parentId: detail.parent?.uuid ?? null,
+        name: detail.name,
+        itemCount: detail.tracksCount,
+        wikidataId: detail.wikidataId
+      },
+      fill: rootColor,
+      parentNode: detail.parent ? relative(detail.parent, null) : null,
+      childNodes: detail.children.map((child) => relative(child, detail.uuid)),
+      ancestorNodes: ancestors.map(
+        ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors[index - 1].ascendant.uuid)
+      )
+    };
+  }, [detail]);
+  if (isError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
+  }
+  if (isPending || !detail || !view) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-4 w-3/4" })
+    ] });
+  }
+  const renderBody = (node, sections) => ({
+    primary: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      GenreInfoPanelBody,
+      {
+        toolbar: sections.toolbar,
+        family: sections.family,
+        genreUuid: detail.uuid,
+        genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+        wikidataId: detail.wikidataId,
+        scope,
+        getBackendBaseUrl,
+        playback,
+        band: { node, onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 },
+        extras
+      }
+    ),
+    aside: null
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_genre_tree_view5.InfoPanel,
+    {
+      node: view.node,
+      fill: view.fill,
+      textColor: import_genre_tree_view5.ACCENT_TEXT_COLOR,
+      parentNode: view.parentNode,
+      childNodes: view.childNodes,
+      ancestorNodes: view.ancestorNodes,
+      side: "left",
+      onClose,
+      onSelectNode: (nodeId) => onSelectGenre(nodeId),
+      itemCountLabel: ITEM_COUNT_LABEL,
+      renderInfoPanelBody: renderBody,
+      expanded,
+      onExpandedChange,
+      collapsed,
+      hideExpandButton: onExpandedChange === void 0
+    }
+  );
+}
+
+// src/genre-tree/index.ts
+var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
-var import_react11 = require("react");
+var import_react17 = require("react");
+var import_lucide_react16 = require("lucide-react");
 var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun7 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var useBrowserLayoutEffect = typeof window === "undefined" ? import_react17.useEffect : import_react17.useLayoutEffect;
 function TrackListSidebar({
-  className = "",
+  className: className2 = "",
   renderDuration,
   renderActions,
   layout = "fixed",
+  isCollapsed = false,
+  onExpand,
+  onMinimize,
   renderArtistLink
 }) {
-  const { trackList, loadMore } = (0, import_genre_tree19.useTrackList)();
+  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree19.useTrackList)();
   const trackNoun = (0, import_track_noun7.useTrackNoun)();
-  const loadMoreSentinelRef = (0, import_react11.useRef)(null);
+  const trackListRef = (0, import_react17.useRef)(null);
+  const previousOriginRef = (0, import_react17.useRef)(trackList?.origin ?? null);
+  const handledAutoAdvanceRequestIdRef = (0, import_react17.useRef)(null);
+  const shouldFollowPlaybackRef = (0, import_react17.useRef)(true);
+  const programmaticScrollTopRef = (0, import_react17.useRef)(null);
+  const userScrollIntentRef = (0, import_react17.useRef)(false);
+  const userScrollIntentTimerRef = (0, import_react17.useRef)(null);
+  const loadMoreSentinelRef = (0, import_react17.useRef)(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const sentinel = loadMoreSentinelRef.current;
     if (!hasMore || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -2591,44 +3192,115 @@ function TrackListSidebar({
     observer.observe(sentinel);
     return () => observer.disconnect();
   }, [hasMore, loadMore]);
-  const { hideTrackListSidebar } = (0, import_genre_tree20.useTrackListSidebarVisibility)();
-  const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem]";
-  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  useBrowserLayoutEffect(() => {
+    const origin = trackList?.origin ?? null;
+    if (previousOriginRef.current === origin) return;
+    previousOriginRef.current = origin;
+    handledAutoAdvanceRequestIdRef.current = null;
+    shouldFollowPlaybackRef.current = true;
+    programmaticScrollTopRef.current = null;
+    if (trackListRef.current) trackListRef.current.scrollTop = 0;
+  }, [trackList?.origin]);
+  (0, import_react17.useEffect)(() => {
+    const list = trackListRef.current;
+    if (!isCollapsed && list?.scrollTop === 0) shouldFollowPlaybackRef.current = true;
+  }, [isCollapsed]);
+  (0, import_react17.useEffect)(
+    () => () => {
+      if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
+    },
+    []
+  );
+  useBrowserLayoutEffect(() => {
+    if (!autoAdvanceScrollRequest || handledAutoAdvanceRequestIdRef.current === autoAdvanceScrollRequest.id) {
+      return;
+    }
+    if (isCollapsed) return;
+    const list = trackListRef.current;
+    if (!list) return;
+    if (list.scrollTop <= 1) shouldFollowPlaybackRef.current = true;
+    if (!shouldFollowPlaybackRef.current) {
+      handledAutoAdvanceRequestIdRef.current = autoAdvanceScrollRequest.id;
+      return;
+    }
+    const row = Array.from(list.querySelectorAll("[data-track-uuid]")).find(
+      (element) => element.dataset.trackUuid === autoAdvanceScrollRequest.trackUuid
+    );
+    if (!row) return;
+    handledAutoAdvanceRequestIdRef.current = autoAdvanceScrollRequest.id;
+    const rowTop = row.getBoundingClientRect().top - list.getBoundingClientRect().top;
+    const targetScrollTop = list.scrollTop + rowTop;
+    programmaticScrollTopRef.current = targetScrollTop;
+    list.scrollTop = targetScrollTop;
+    programmaticScrollTopRef.current = list.scrollTop;
+  }, [autoAdvanceScrollRequest, isCollapsed, trackList]);
+  const markUserScrollIntent = () => {
+    userScrollIntentRef.current = true;
+    if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
+    userScrollIntentTimerRef.current = setTimeout(() => {
+      userScrollIntentRef.current = false;
+      userScrollIntentTimerRef.current = null;
+    }, 250);
+  };
+  const handleTrackListScroll = (event) => {
+    const list = event.currentTarget;
+    if (userScrollIntentRef.current) {
+      userScrollIntentRef.current = false;
+      if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
+      userScrollIntentTimerRef.current = null;
+      programmaticScrollTopRef.current = null;
+      shouldFollowPlaybackRef.current = list.scrollTop <= 1;
+      return;
+    }
+    const programmaticScrollTop = programmaticScrollTopRef.current;
+    if (programmaticScrollTop !== null) {
+      if (Math.abs(list.scrollTop - programmaticScrollTop) <= 1) programmaticScrollTopRef.current = null;
+      return;
+    }
+  };
+  const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem] flex flex-col";
+  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       "data-theme": "dark",
-      className: `track-list-sidebar ${positionClasses} rounded-2xl bg-[var(--color-surface)] pb-1 ${className}`,
-      style: layout === "fixed" ? {
-        bottom: "79px"
-        /* Match player height exactly */
-      } : void 0,
+      className: `track-list-sidebar ${positionClasses} rounded-2xl bg-[var(--color-surface)] pb-1 ${className2}`,
+      style: layout === "fixed" ? { top: "63.5px", maxHeight: "calc(100vh - 63.5px - 79px)" } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "header flex h-16 px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "origin flex text-xl ", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "info flex flex-col justify-center items-center pt-1 mr-2 text-[var(--color-text-muted)]", children: [
-            trackList.origin.type === import_genre_tree21.TrackListOriginType.GENRE_PLAYLIST ? "\u2022 Genre playlist \u2022 " : trackList.origin.type === import_genre_tree21.TrackListOriginType.ARTIST ? "\u2022 Artist \u2022 " : `\u2022 ${trackNoun.singular} playlist \u2022 `,
-            `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular} \u2022`
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+              trackList.origin.type === import_genre_tree20.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree20.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
+              `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {
               type: "button",
-              "aria-label": "Close track list",
-              className: "flex-grow flex flex-col items-end justify-center h-full p-3 cursor-pointer text-inherit",
-              onClick: hideTrackListSidebar,
-              children: "\u2715"
+              "aria-label": isCollapsed ? "Show tracks" : "Hide tracks",
+              title: isCollapsed ? "Show tracks" : "Hide tracks",
+              "aria-expanded": !isCollapsed,
+              className: `ml-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-md hover:bg-[var(--color-surface-muted)] ${isCollapsed ? "text-[var(--color-text-muted)]" : "text-white"}`,
+              onClick: isCollapsed ? onExpand : onMinimize,
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react16.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "ul",
           {
-            className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list overflow-auto max-h-[calc(100vh-63.5px-79px-56px-3.5px)] list-none p-0 m-0",
+            ref: trackListRef,
+            onScroll: handleTrackListScroll,
+            onWheel: markUserScrollIntent,
+            onTouchMove: markUserScrollIntent,
+            onPointerDown: markUserScrollIntent,
+            className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0",
             children: [
-              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 TrackItem,
                 {
                   track,
@@ -2638,7 +3310,7 @@ function TrackListSidebar({
                   renderArtistLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -2648,42 +3320,162 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-var import_react12 = require("react");
-var import_lucide_react13 = require("lucide-react");
+var import_react18 = require("react");
 var import_tailwind_merge2 = require("tailwind-merge");
-var import_player11 = require("@behindthemusictree/app-kit/player");
+var import_player12 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// src/genre-tree/PlayerControls.tsx
+var import_lucide_react17 = require("lucide-react");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
+var import_player11 = require("@behindthemusictree/app-kit/player");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function PlayerControls() {
+  const {
+    duration,
+    handlePlayPauseAction,
+    isLoading,
+    playState,
+    playerTrackObject,
+    seekTo,
+    setVolume,
+    volume
+  } = (0, import_player11.usePlayer)();
+  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree21.useTrackList)();
+  const currentTime = (0, import_player11.useCurrentTime)();
+  const isBusy = isLoading || playState === import_player11.PlayStates.LOADING;
+  const isReady = !!playerTrackObject?.isReady && !isBusy && !playerTrackObject.loadError;
+  const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
+  const safeCurrentTime = Number.isFinite(currentTime) ? Math.max(0, Math.min(currentTime, safeDuration)) : 0;
+  const isPlaying = playState === import_player11.PlayStates.PLAYING;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "section",
+    {
+      "aria-label": "Player controls",
+      className: "player-controls flex shrink-0 flex-col gap-2 border-b border-zinc-800 px-3 py-2 text-zinc-200",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree21.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "input",
+            {
+              "aria-label": "Seek",
+              className: "h-1 min-w-0 flex-1 cursor-pointer accent-white disabled:cursor-not-allowed disabled:opacity-40",
+              type: "range",
+              min: 0,
+              max: safeDuration,
+              step: 0.1,
+              value: safeCurrentTime,
+              disabled: !isReady || safeDuration <= 0,
+              onChange: (event) => seekTo(Number(event.currentTarget.value))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree21.formatTime)(safeDuration) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous track",
+                title: "Previous track",
+                disabled: !isReady || !hasPreviousTrack,
+                onClick: playPreviousTrack,
+                className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": isPlaying ? "Pause" : "Play",
+                title: isPlaying ? "Pause" : "Play",
+                disabled: !isReady,
+                onClick: handlePlayPauseAction,
+                className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-zinc-950 hover:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-40",
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next track",
+                title: "Next track",
+                disabled: !isReady || !hasNextTrack,
+                onClick: playNextTrack,
+                className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
+            volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "input",
+              {
+                "aria-label": "Volume",
+                className: "h-[3px] min-w-0 flex-1 cursor-pointer accent-white disabled:cursor-not-allowed disabled:opacity-40",
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: volume,
+                disabled: !isReady,
+                onChange: (event) => setVolume(Number(event.currentTarget.value))
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/genre-tree/PlayerPanel.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var PANEL_ID = "player-panel";
-var iconButtonClassName = "flex h-6 w-6 shrink-0 items-center justify-center p-0 rounded-md hover:bg-white/10";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
-  className,
+  className: className2,
   isVisible = true,
-  onClose,
   expanded,
   onExpandedChange,
   extendedWidth = DEFAULT_EXTENDED_WIDTH,
   renderArtistLink
 }) {
-  const { playerTrackObject } = (0, import_player11.usePlayer)();
+  const { playerTrackObject } = (0, import_player12.usePlayer)();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree22.useTrackListSidebarVisibility)();
-  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react12.useState)(false);
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react18.useState)("");
+  const loadedTrackTitle = playerTrackObject?.track.title;
+  (0, import_react18.useEffect)(() => {
+    if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
+  }, [loadedTrackTitle]);
+  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react18.useState)(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
     onExpandedChange?.(next);
   };
   const isExtended = isExtendRequested && isTrackListSidebarVisible;
-  const tabEdge = !isTrackListSidebarVisible ? null : isExtended ? {
-    label: "Shrink song list panel",
-    onClick: () => setIsExtendRequested(false)
-  } : { label: "Hide song list", onClick: toggleTrackListSidebar };
-  const tabCenter = !isTrackListSidebarVisible ? { label: "Show song list", onClick: toggleTrackListSidebar } : isExtended ? null : {
-    label: "Extend song list panel",
-    onClick: () => setIsExtendRequested(true)
+  const hideSongList = () => {
+    setIsExtendRequested(false);
+    if (isTrackListSidebarVisible) toggleTrackListSidebar();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  const tabEdge = isTrackListSidebarVisible && isExtended ? {
+    label: "Shrink player panel",
+    onClick: () => setIsExtendRequested(false),
+    expanded: true
+  } : null;
+  const tabCenter = isTrackListSidebarVisible && !isExtended ? {
+    label: "Extend player panel",
+    onClick: () => setIsExtendRequested(true),
+    expanded: false
+  } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       id: PANEL_ID,
@@ -2692,11 +3484,11 @@ function PlayerPanel({
         !isExtended && "w-[var(--layout-right-w)]",
         isTrackListSidebarVisible && "h-[calc(100vh-var(--layout-band-top)-3.5rem)]",
         !isVisible && "hidden",
-        className
+        className2
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           PanelEdgeTab,
           {
             side: "right",
@@ -2706,7 +3498,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge2.twMerge)(
@@ -2714,29 +3506,21 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: playerTrackObject?.track?.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: onClose,
-                      className: iconButtonClassName,
-                      "aria-label": "Close player",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react13.X, { size: 16 })
-                    }
-                  ) })
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_player12.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_player11.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
-                ] })
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PlayerControls, {})
               ] }),
-              isTrackListSidebarVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 TrackListSidebar,
                 {
                   layout: "inline",
+                  isCollapsed: !isTrackListSidebarVisible,
+                  onExpand: toggleTrackListSidebar,
+                  onMinimize: hideSongList,
                   className: (0, import_tailwind_merge2.twMerge)(
                     "min-h-0 min-w-0 flex-1",
                     isExtended && "border-l border-zinc-800"
@@ -2756,11 +3540,11 @@ function PlayerPanel({
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
 var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "input",
       {
         id: `star-${instanceId}-${i}`,
@@ -2772,16 +3556,16 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         import_ai.AiOutlineStar,
         {
           className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree23.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_ai.AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
@@ -2795,6 +3579,9 @@ function Rating({ rating, handleChange }) {
   AuthErrorPopup,
   AuthPopup,
   BasePopup,
+  GenreDetailPanel,
+  GenreInfoPanelBody,
+  GenreNodeActionBand,
   GenrePlaylistTreePerRoot,
   GenreSearch,
   GenreTreeOutlineSkeleton,
@@ -2810,9 +3597,12 @@ function Rating({ rating, handleChange }) {
   PopupTitle,
   Rating,
   SpotifyAuthErrorPopup,
+  Toast,
   TrackItem,
   TrackListSidebar,
   TrackPositionPlayPause,
-  TrackUploadPopup
+  TrackUploadPopup,
+  useGenrePlaylistPlayback,
+  useLeftDetailPanelLayout
 });
 //# sourceMappingURL=index.cjs.map