npm - @behindthemusictree/app-kit-ui - Versions diffs - 26.1.0 → 28.0.2 - Mend

@behindthemusictree/app-kit-ui 26.1.0 → 28.0.2

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

Files changed (23) hide show

package/dist/{chunk-KPWV4LEJ.js → chunk-5PQWJRDZ.js} +1061 -541
package/dist/chunk-5PQWJRDZ.js.map +1 -0
package/dist/chunk-DKQQLLMY.js +246 -0
package/dist/chunk-DKQQLLMY.js.map +1 -0
package/dist/{chunk-ZLCRD7OK.js → chunk-XUC4UJDQ.js} +2 -2
package/dist/genre-tree/index.cjs +1260 -635
package/dist/genre-tree/index.cjs.map +1 -1
package/dist/genre-tree/index.d.ts +35 -8
package/dist/genre-tree/index.js +2 -2
package/dist/genre-tree/styles.css +80 -0
package/dist/index.cjs +1286 -661
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +2 -2
package/dist/index.js +6 -4
package/dist/popup/index.cjs +179 -73
package/dist/popup/index.cjs.map +1 -1
package/dist/popup/index.d.ts +22 -2
package/dist/popup/index.js +5 -3
package/package.json +7 -7
package/dist/chunk-KPWV4LEJ.js.map +0 -1
package/dist/chunk-VDXUW7PP.js +0 -141
package/dist/chunk-VDXUW7PP.js.map +0 -1
/package/dist/{chunk-ZLCRD7OK.js.map → chunk-XUC4UJDQ.js.map} +0 -0

package/dist/index.cjs CHANGED Viewed

@@ -39,6 +39,7 @@ __export(src_exports, {
   PopupTitle: () => PopupTitle,
   Rating: () => Rating,
   SpotifyAuthErrorPopup: () => SpotifyAuthErrorPopup,
+  Toast: () => Toast,
   TrackItem: () => TrackItem,
   TrackListSidebar: () => TrackListSidebar,
   TrackPositionPlayPause: () => TrackPositionPlayPause,
@@ -50,29 +51,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 +114,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 +129,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 +185,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 +195,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 +230,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 +304,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 +315,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 +353,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 +372,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 +399,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 +421,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 +433,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 +441,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 +481,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 +490,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 +518,7 @@ function SpotifyAuthErrorPopup({
               " ",
               "to",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "a",
                 {
                   href: requestAccessHref,
@@ -422,16 +527,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 +548,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,42 +568,42 @@ 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_react13 = 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");
+var import_popup6 = 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");
+var import_genre_tree7 = 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)(() => {
+var import_react3 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ClampedText({ children, className: className2 = "" }) {
+  const ref = (0, import_react3.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react3.useState)(false);
+  const [overflows, setOverflows] = (0, import_react3.useState)(false);
+  (0, import_react3.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
         type: "button",
@@ -512,10 +617,10 @@ function ClampedText({ children, className = "" }) {
 }
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_zod = require("zod");
-var import_fa5 = require("react-icons/fa");
+var import_fa3 = 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");
@@ -524,33 +629,22 @@ var import_transport4 = require("@behindthemusictree/app-kit/transport");
 var import_player = require("@behindthemusictree/app-kit/player");
 var import_player2 = require("@behindthemusictree/app-kit/player");
 var import_popup2 = require("@behindthemusictree/app-kit/popup");
-// src/genre-tree/UnplayableReason.tsx
-var import_fa3 = require("react-icons/fa");
-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_tree2 = require("@behindthemusictree/app-kit/genre-tree");
 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_genre_tree = 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;
+function MusicBrainzRecordingLink({
+  song,
+  children,
+  className: className2 = ""
+}) {
+  const url = (0, import_genre_tree.musicBrainzRecordingUrl)(song);
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "a",
     {
@@ -558,20 +652,19 @@ function MusicBrainzRecordingLink({ song }) {
       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",
+      className: className2,
       onClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa4.FaExternalLinkAlt, { size: 10 })
+      children
     }
   );
 }
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
 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({
+var SongPageSchema = (0, import_transport3.PaginatedResponseSchema)(import_genre_tree4.SongDetailedSchema).extend({
   overallTotal: import_zod.z.number().nullable(),
   page: import_zod.z.number().nullable(),
   totalPages: import_zod.z.number().nullable()
@@ -597,7 +690,7 @@ function GenrePlaylistTracks({
   renderTracksToolbar,
   artist = null
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree6.useTrackList)();
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree5.useTrackList)();
   const { session, sessionRestored } = (0, import_auth2.useSession)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player.usePlayer)();
   const { showPopup } = (0, import_popup2.usePopup)();
@@ -605,11 +698,11 @@ function GenrePlaylistTracks({
   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),
+    queryKey: scope === "me" ? import_genre_tree2.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree3.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree3.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(),
+        import_genre_tree3.libraryEndpoints.reference.songs.list(),
         true,
         false,
         {},
@@ -622,8 +715,8 @@ function GenrePlaylistTracks({
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
     enabled: scope !== "me" || sessionRestored && !!session?.accessToken
   });
-  const sentinelRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const sentinelRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     const sentinel = sentinelRef.current;
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -662,16 +755,16 @@ function GenrePlaylistTracks({
         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 }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: TITLE_CELL, children: (0, import_genre_tree4.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : 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 }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_genre_tree6.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: [
+        const isUnplayable = (0, import_genre_tree4.isSong)(track) && (0, import_genre_tree4.songUnplayableReason)(track) !== null;
+        if (isUnplayable) {
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
             leading,
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
@@ -679,14 +772,12 @@ function GenrePlaylistTracks({
                 type: "button",
                 disabled: true,
                 "aria-disabled": "true",
-                "aria-label": `${label} \u2014 ${unplayableReason}`,
+                "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_runtime14.jsx)(import_fa5.FaPlay, { size: 10 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa3.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);
         }
@@ -703,11 +794,10 @@ function GenrePlaylistTracks({
                   "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 })
+                  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_fa3.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa3.FaPlay, { size: 10 })
                 }
               ),
               text,
-              (0, import_genre_tree5.isSong)(track) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MusicBrainzRecordingLink, { song: track }),
               actions
             ]
           },
@@ -721,10 +811,12 @@ function GenrePlaylistTracks({
 // src/genre-tree/GenreDetailExtras.tsx
 var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
+var import_si = require("react-icons/si");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
+  wikidataId,
   scope,
   getBackendBaseUrl,
   criteriaOverviewSchema,
@@ -736,7 +828,7 @@ function GenreDetailExtras({
   ...trackSlots
 }) {
   const trackNoun = (0, import_track_noun3.useTrackNoun)();
-  const { data: overview, isPending } = (0, import_genre_tree8.useFetchGenreOverview)(
+  const { data: overview, isPending } = (0, import_genre_tree7.useFetchGenreOverview)(
     genreUuid,
     scope,
     getBackendBaseUrl,
@@ -752,33 +844,44 @@ function GenreDetailExtras({
     ] });
   }
   if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: family });
-  const { summary, description, summarySourceUrl, essentialSongs } = overview;
+  const { summary, summarySourceUrl, essentialSongs } = overview;
+  const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
   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) }),
+    (summarySourceUrl || wikidataUrl) && /* @__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: "Links" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs", children: [
+        summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(import_si.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+              "Wikipedia"
+            ]
+          }
+        ),
+        wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(import_si.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+              "Wikidata"
+            ]
+          }
+        )
+      ] })
+    ] }),
     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"
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid)
     ] }),
-    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: [
@@ -803,30 +906,30 @@ function GenreDetailExtras({
 }
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
-var import_react4 = require("react");
+var import_react6 = 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");
+var import_react5 = require("react");
+var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
 function useGenrePlaylistPlayback({
   scope,
   genrePlaylists,
   artist = null
 }) {
-  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree9.useTrackList)();
+  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree8.useTrackList)();
   const origin = trackList?.origin;
-  const playingNodeId = (0, import_react3.useMemo)(() => {
+  const playingNodeId = (0, import_react5.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;
+    if (!artist) return origin.type === import_genre_tree8.TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
+    if (origin.type !== import_genre_tree8.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)(
+  const play = (0, import_react5.useCallback)(
     async (genrePlaylist) => {
       if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
       if (!genrePlaylist.criteria) return;
@@ -834,7 +937,7 @@ function useGenrePlaylistPlayback({
     },
     [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
   );
-  return (0, import_react3.useMemo)(() => ({ playingNodeId, play }), [playingNodeId, play]);
+  return (0, import_react5.useMemo)(() => ({ playingNodeId, play }), [playingNodeId, play]);
 }
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
@@ -842,7 +945,7 @@ var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function GenrePlaylistTreePerRoot({
   scope,
-  className,
+  className: className2,
   rootUuid,
   genrePlaylistTreePerRoot,
   handleGenreCreationAction,
@@ -869,7 +972,7 @@ function 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)(
+  const nodes = (0, import_react6.useMemo)(
     () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
@@ -882,7 +985,7 @@ function GenrePlaylistTreePerRoot({
     })),
     [genrePlaylistTreePerRoot]
   );
-  const handlePlayPause = (0, import_react4.useCallback)(
+  const handlePlayPause = (0, import_react6.useCallback)(
     (nodeId) => {
       const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === nodeId);
       if (!genrePlaylist) return;
@@ -907,7 +1010,7 @@ function GenrePlaylistTreePerRoot({
       showPopup
     ]
   );
-  const handleAddChild = (0, import_react4.useCallback)(
+  const handleAddChild = (0, import_react6.useCallback)(
     (parentId) => {
       const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === parentId);
       if (!genrePlaylist?.criteria) return;
@@ -915,7 +1018,7 @@ function GenrePlaylistTreePerRoot({
     },
     [genrePlaylistTreePerRoot, handleGenreCreationAction]
   );
-  const handleRenameRequest = (0, import_react4.useCallback)(
+  const handleRenameRequest = (0, import_react6.useCallback)(
     (node) => {
       const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === node.id);
       if (!genrePlaylist?.criteria) return;
@@ -923,14 +1026,14 @@ function GenrePlaylistTreePerRoot({
     },
     [genrePlaylistTreePerRoot, handleGenreRenameAction]
   );
-  const handleDeleteRequest = (0, import_react4.useCallback)((node) => {
+  const handleDeleteRequest = (0, import_react6.useCallback)((node) => {
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_genre_tree_view.GenreTree,
     {
-      className,
+      className: className2,
       nodes,
       itemCountLabel: `${(0, import_track_noun4.capitalize)(trackNoun.singular)} count`,
       rootColor: (0, import_genre_tree_view.getGenreTreeColor)(rootUuid),
@@ -960,21 +1063,28 @@ function GenrePlaylistTreePerRoot({
 }
 // src/genre-tree/playlist-tree/TreeWheel.tsx
-var import_react5 = require("react");
+var import_react7 = 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");
 // 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");
 function GenrePlaylistTreeWheel({
   scope,
-  className,
+  className: className2,
   genrePlaylists,
   handleGenreCreationAction,
   handleGenreRenameAction,
@@ -1003,7 +1113,7 @@ function GenrePlaylistTreeWheel({
   const { playingNodeId, play } = playback ?? defaultPlayback;
   const trackNoun = (0, import_track_noun5.useTrackNoun)();
   const { showPopup } = (0, import_popup4.usePopup)();
-  const nodes = (0, import_react5.useMemo)(
+  const nodes = (0, import_react7.useMemo)(
     () => genrePlaylists.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
@@ -1015,7 +1125,7 @@ function GenrePlaylistTreeWheel({
     })),
     [genrePlaylists, sizeMetric]
   );
-  const handlePlayPause = (0, import_react5.useCallback)(
+  const handlePlayPause = (0, import_react7.useCallback)(
     (nodeId) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === nodeId);
       if (!genrePlaylist) return;
@@ -1040,7 +1150,7 @@ function GenrePlaylistTreeWheel({
       showPopup
     ]
   );
-  const handleAddChild = (0, import_react5.useCallback)(
+  const handleAddChild = (0, import_react7.useCallback)(
     (parentId) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === parentId);
       if (!genrePlaylist?.criteria) return;
@@ -1048,7 +1158,7 @@ function GenrePlaylistTreeWheel({
     },
     [genrePlaylists, handleGenreCreationAction]
   );
-  const handleRenameRequest = (0, import_react5.useCallback)(
+  const handleRenameRequest = (0, import_react7.useCallback)(
     (node) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === node.id);
       if (!genrePlaylist?.criteria) return;
@@ -1056,14 +1166,14 @@ function GenrePlaylistTreeWheel({
     },
     [genrePlaylists, handleGenreRenameAction]
   );
-  const handleDeleteRequest = (0, import_react5.useCallback)((node) => {
+  const handleDeleteRequest = (0, import_react7.useCallback)((node) => {
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_genre_tree_view2.GenreTreeWheel,
     {
-      className,
+      className: className2,
       nodes,
       itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun5.capitalize)(trackNoun.singular)} count`,
       playingNodeId,
@@ -1094,7 +1204,7 @@ function GenrePlaylistTreeWheel({
 }
 // src/genre-tree/playlist-tree/TreeWheelRadialPopCore.tsx
-var import_react6 = require("react");
+var import_react8 = 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");
@@ -1102,7 +1212,7 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheelRadialPopCore(props) {
   const {
     scope,
-    className,
+    className: className2,
     genrePlaylists,
     handleGenreCreationAction,
     handleGenreRenameAction,
@@ -1139,7 +1249,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
   const trackNoun = (0, import_track_noun6.useTrackNoun)();
-  const nodes = (0, import_react6.useMemo)(
+  const nodes = (0, import_react8.useMemo)(
     () => genrePlaylists.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
@@ -1154,7 +1264,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     })),
     [genrePlaylists, sizeMetric]
   );
-  const handlePlayPause = (0, import_react6.useCallback)(
+  const handlePlayPause = (0, import_react8.useCallback)(
     (nodeId) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === nodeId);
       if (!genrePlaylist) return;
@@ -1171,7 +1281,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     },
     [genrePlaylists, playingNodeId, isPlaying, setIsPlaying, play]
   );
-  const handleAddChild = (0, import_react6.useCallback)(
+  const handleAddChild = (0, import_react8.useCallback)(
     (parentId) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === parentId);
       if (!genrePlaylist?.criteria) return;
@@ -1179,7 +1289,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     },
     [genrePlaylists, handleGenreCreationAction]
   );
-  const handleRenameRequest = (0, import_react6.useCallback)(
+  const handleRenameRequest = (0, import_react8.useCallback)(
     (node) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === node.id);
       if (!genrePlaylist?.criteria) return;
@@ -1187,12 +1297,12 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     },
     [genrePlaylists, handleGenreRenameAction]
   );
-  const handleDeleteRequest = (0, import_react6.useCallback)((node) => {
+  const handleDeleteRequest = (0, import_react8.useCallback)((node) => {
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
   const treeProps = {
-    className,
+    className: className2,
     nodes,
     itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun6.capitalize)(trackNoun.singular)} count`,
     playingNodeId,
@@ -1229,13 +1339,13 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
 }
 // src/genre-tree/GenreTreeWheelHandoff.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
-  const [revealed, setRevealed] = (0, import_react7.useState)(false);
-  const onRevealedChangeRef = (0, import_react7.useRef)(onRevealedChange);
+  const [revealed, setRevealed] = (0, import_react9.useState)(false);
+  const onRevealedChangeRef = (0, import_react9.useRef)(onRevealedChange);
   onRevealedChangeRef.current = onRevealedChange;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     let innerFrame = 0;
     const outerFrame = requestAnimationFrame(() => {
       innerFrame = requestAnimationFrame(() => {
@@ -1266,7 +1376,7 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
 // 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_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function GenreSearch({
   genrePlaylists,
@@ -1278,7 +1388,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_tree9.useGenreSearch)({
     genrePlaylists,
     onSelect,
     selectedName,
@@ -1289,14 +1399,14 @@ 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: [
+  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 max-md:w-full", children: [
     onPrevious && /* @__PURE__ */ (0, import_jsx_runtime20.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" })
       }
@@ -1313,6 +1423,9 @@ 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"
       }
     ),
@@ -1345,7 +1458,7 @@ function GenreSearch({
         {
           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?.("");
@@ -1355,13 +1468,13 @@ function GenreSearch({
       )
     ] }),
     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: [
+    showList && /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)("li", { className: heading, children: "Genres" }),
       results.map((genrePlaylist) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.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?.("");
@@ -1377,7 +1490,7 @@ function GenreSearch({
         "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?.("");
@@ -1391,8 +1504,227 @@ function GenreSearch({
 }
 // src/genre-tree/GenreActionBand.tsx
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react11 = require("lucide-react");
+// src/genre-tree/ShareActionButton.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_popup5 = require("@behindthemusictree/app-kit/popup");
+// src/genre-tree/SharePopup.tsx
+var import_react10 = require("react");
+var import_lucide_react9 = require("lucide-react");
+var import_fa4 = require("react-icons/fa");
+var import_si2 = require("react-icons/si");
+// src/genre-tree/ShareDestinationButton.tsx
 var import_jsx_runtime21 = 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_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsx)("span", { className: "max-w-full truncate", children: label })
+  ] });
+}
+function ShareDestinationButton({
+  label,
+  icon,
+  href,
+  onClick,
+  disabled = false,
+  ariaLabel
+}) {
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Contents, { icon, label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Contents, { icon, label }) });
+}
+// src/genre-tree/SharePreviewCard.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime22 = 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_runtime22.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
+    ] })
+  ] }) });
+}
+// src/genre-tree/SharePopup.tsx
+var import_jsx_runtime23 = 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_react10.useState)(url);
+  const [copyStatus, setCopyStatus] = (0, import_react10.useState)("idle");
+  const [canUseNativeShare, setCanUseNativeShare] = (0, import_react10.useState)(false);
+  const [shareError, setShareError] = (0, import_react10.useState)(null);
+  const [toastId, setToastId] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
+    setAbsoluteUrl(resolveAbsoluteUrl(url) ?? "");
+    setCopyStatus("idle");
+    setShareError(null);
+  }, [url]);
+  (0, import_react10.useEffect)(() => {
+    setCanUseNativeShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
+  }, []);
+  const destinationUrls = (0, import_react10.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_react10.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_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(
+              ShareDestinationButton,
+              {
+                label: "Copy Link",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(
+              ShareDestinationButton,
+              {
+                label: "WhatsApp",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fa4.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_runtime23.jsx)(
+              ShareDestinationButton,
+              {
+                label: "Gmail",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_si2.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_runtime23.jsx)(
+              ShareDestinationButton,
+              {
+                label: "More",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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_runtime23.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
+        ] })
+      }
+    ),
+    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+  ] });
+}
+// src/genre-tree/ShareActionButton.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function ShareActionButton({ target, url }) {
+  const { showPopup, hidePopup } = (0, import_popup5.usePopup)();
+  const openSharePopup = () => {
+    showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SharePopup, { target, url, onClose: hidePopup }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+        "Share"
+      ]
+    }
+  );
+}
+// src/genre-tree/GenreActionBand.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function GenreActionBand({
   node,
   onPlayPause,
@@ -1401,7 +1733,12 @@ function GenreActionBand({
   onAddChild,
   onRename,
   onChangeParent,
-  additionalActions
+  side,
+  onToggleSide,
+  toggleSideDisabledReason,
+  additionalActions,
+  shareTarget,
+  shareUrl
 }) {
   const items = [];
   const adminItems = [];
@@ -1409,7 +1746,7 @@ function GenreActionBand({
     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" }),
+      icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onPlayPause
     });
   }
@@ -1417,18 +1754,28 @@ function GenreActionBand({
     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_runtime25.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_runtime25.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_runtime25.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_runtime25.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_runtime25.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,31 +1786,35 @@ function GenreActionBand({
       disabled: action.enabled ? !action.enabled(node) : false
     });
   }
-  if (items.length === 0 && adminItems.length === 0) return null;
-  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  if (items.length === 0 && (!shareTarget || !shareUrl) && adminItems.length === 0) return null;
+  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.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: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.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)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.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)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
         item.label
       ]
     },
     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) }),
-    adminItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
+    (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      renderItems(items),
+      shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+    ] }),
+    adminItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "section",
       {
         "aria-label": "Admin actions",
         className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
         ]
       }
     )
@@ -1471,16 +1822,16 @@ function GenreActionBand({
 }
 // 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_runtime26 = 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_runtime26.jsx)(
     "button",
     {
       type: "button",
@@ -1493,20 +1844,20 @@ 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_runtime26.jsx)(EdgeIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const centerButton = center && renderButton(center, /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.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_runtime26.jsx)("div", { role: "presentation", className: "h-px shrink-0 bg-[var(--color-border)]" }),
         buttons[1]
       ]
     }
@@ -1514,9 +1865,9 @@ function PanelEdgeTab({ side, edge, center, controls, className }) {
 }
 // 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_react11 = require("react");
+var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1525,9 +1876,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_react11.useMemo)(
+    () => (0, import_genre_tree10.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
   const handleSelect = (newParent) => {
@@ -1544,19 +1895,19 @@ function ChangeParentPopup({
       }
     );
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.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_runtime27.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1564,32 +1915,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_runtime27.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_runtime28 = 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 +1960,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_runtime28.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui9.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime28.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 +1978,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1637,35 +1988,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_runtime29.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_runtime29.jsx)(import_ui10.FieldList, { items: fields });
 }
 // src/genre-tree/artist/ArtistPhoto.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime30 = 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_runtime30.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_runtime30.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.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_runtime30.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_runtime31 = 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_runtime31.jsx)(import_ui11.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1673,9 +2024,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_runtime31.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -1686,9 +2037,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_runtime31.jsxs)(import_ui11.PanelSection, { title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       MembershipList,
       {
         title: "Past",
@@ -1701,7 +2052,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_runtime32 = 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 +2072,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_runtime32.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_runtime32.jsx)(import_ui12.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.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_react12 = 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_lucide_react14 = require("lucide-react");
+var import_ui13 = require("@behindthemusictree/ui");
 var import_player9 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
+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_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
 // src/genre-tree/TrackPositionPlayPause.tsx
-var import_fa6 = require("react-icons/fa");
+var import_fa5 = require("react-icons/fa");
 var import_player6 = require("@behindthemusictree/app-kit/player");
 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_jsx_runtime33 = require("react/jsx-runtime");
+function TrackPositionPlayPause({
+  position,
+  uuid,
+  handlePlayPauseClick,
+  isSelected = false
+}) {
+  const { playerTrackObject, playbackConfirmedTrackId, playState, isLoading: isPlayerLoading } = (0, import_player6.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_player7.PlayStates.LOADING || playState === import_player7.PlayStates.PLAYING);
+  const isPlaying = isThisTrack && isConfirmedPlayable && playState === import_player7.PlayStates.PLAYING;
+  const isPaused = isThisTrack && isConfirmedPlayable && playState === import_player7.PlayStates.PAUSED;
+  const isCurrentTrackActive = isPlaying || isPaused;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          "span",
+          {
+            className: "track-position-play-pause__bars",
+            "data-playing": isPlaying,
+            role: "img",
+            "aria-label": isPlaying ? "Playing" : "Paused",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" })
+            ]
+          }
+        ) : position }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
+            "aria-hidden": "true",
+            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa5.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime34 = require("react/jsx-runtime");
 function TrackItem({
   track,
   position,
@@ -1800,25 +2159,26 @@ function TrackItem({
   renderArtistLink
 }) {
   const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player8.usePlayer)();
-  const { trackList, toTrackAtPosition } = (0, import_genre_tree12.useTrackList)();
+  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_runtime34.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_runtime34.jsx)(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -1826,18 +2186,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_runtime34.jsx)(
+          TrackPositionPlayPause,
+          {
+            position,
+            uuid: track.uuid,
+            handlePlayPauseClick,
+            isSelected: selectedTrack?.uuid === track.uuid
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.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_runtime34.jsx)(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -1845,28 +2208,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_runtime34.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_runtime35 = 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_react12.useState)(1);
+  const [ordering, setOrdering] = (0, import_react12.useState)("title");
   const { fetch } = (0, import_transport8.useFetchWrapper)(getBackendBaseUrl);
-  const { playNewTrackListFromArtist } = (0, import_genre_tree15.useTrackList)();
+  const { playNewTrackListFromArtist } = (0, import_genre_tree14.useTrackList)();
   const { playerTrackObject } = (0, import_player9.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 +2244,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_runtime35.jsx)(import_ui13.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.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_runtime35.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           type: "button",
@@ -1914,7 +2277,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_runtime35.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       TrackItem,
       {
         track: song,
@@ -1922,21 +2285,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_runtime35.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_runtime36 = 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 +2310,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_runtime36.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.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_runtime36.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_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          shareUrl && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
+          artist.image && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistHeader, { artist }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -1985,7 +2353,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_runtime36.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
@@ -1993,28 +2361,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_runtime37 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_ui16.SegmentedControl,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.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_runtime37.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_runtime38 = 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; }
@@ -2036,7 +2404,7 @@ function GenreNodeActionBand({ genrePlaylist, scope, playback, ...bandProps }) {
       console.error("Failed to load genre playlist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     GenreActionBand,
     {
       ...bandProps,
@@ -2060,13 +2428,14 @@ function GenreTreeView({
   defaultViewport,
   onViewportChange,
   readOnly = false,
-  className,
+  className: className2,
   showDisplayOptions = true,
   showAddRoot = true,
   allowWheelRotation: controlledAllowWheelRotation,
   criteriaOverviewSchema,
   renderGenreDetailExtras,
   controlsOrientation = "horizontal",
+  floatingControlsLeading,
   sizeMetric: controlledSizeMetric,
   onSizeMetricChange,
   renderArtistLink,
@@ -2074,6 +2443,7 @@ function GenreTreeView({
   onArtistUuidChange,
   artistExpanded: controlledArtistExpanded,
   onArtistExpandedChange,
+  getShareUrl,
   artistSearch = true,
   onArtistSelect,
   artistSearchBaseUrl,
@@ -2091,12 +2461,14 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react10.useState)(null);
+  const getShareUrlRef = (0, import_react13.useRef)(getShareUrl);
+  getShareUrlRef.current = getShareUrl;
+  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react13.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_react13.useState)("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
-  const deferredSizeMetric = (0, import_react10.useDeferredValue)(sizeMetric);
+  const deferredSizeMetric = (0, import_react13.useDeferredValue)(sizeMetric);
   const changeSizeMetric = (metric) => {
     if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
     onSizeMetricChange?.(metric);
@@ -2123,7 +2495,7 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree18.useGenreTreeViewState)({
+  } = (0, import_genre_tree17.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
@@ -2132,25 +2504,31 @@ function GenreTreeView({
     criteriaOverviewSchema,
     artistUuid
   });
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree18.genreUpdateMutationKey }) > 0;
+  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_react13.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_react13.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_runtime38.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 +2536,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_react13.useState)(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react13.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2172,11 +2550,11 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setUncontrolledCollapsed(false);
   }, [selectedNodeId, artistUuid]);
-  const isDetailHidden = isCollapsed || !selectedNodeId && !activeOverlayPanel;
-  (0, import_react10.useEffect)(() => {
+  const isDetailHidden = isCollapsed || !hasSelectedGenreNode && !activeOverlayPanel;
+  (0, import_react13.useEffect)(() => {
     if (placement !== "regions" || !isDetailHidden) return void 0;
     const root = document.documentElement;
     root.style.setProperty("--layout-left-w", "0px");
@@ -2195,29 +2573,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_react13.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_react13.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_react13.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_react13.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_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -2243,31 +2630,47 @@ function GenreTreeView({
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = (0, import_react10.useRef)(void 0);
+  const zoomInRef = (0, import_react13.useRef)(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
-  const renderInfoPanelBody = (0, import_react10.useCallback)(
+  const renderInfoPanelBody = (0, import_react13.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_runtime38.jsxs)(import_jsx_runtime38.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: [
+        primary: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
           toolbar,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             GenreNodeActionBand,
             {
               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_runtime38.jsx)(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2279,16 +2682,20 @@ function GenreTreeView({
                   }
                 )
               ),
+              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,
               playback
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             GenreDetailExtras,
             {
               family,
               genreUuid,
               genrePlaylist,
+              wikidataId: criteria.wikidataId,
               scope,
               getBackendBaseUrl,
               criteriaOverviewSchema,
@@ -2317,6 +2724,7 @@ function GenreTreeView({
       hidePopup,
       onParentChanged,
       visibleGenrePlaylists,
+      updateGenre,
       playback,
       filterArtist,
       scope,
@@ -2333,7 +2741,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_runtime38.jsx)(
     PanelEdgeTab,
     {
       side: "left",
@@ -2341,25 +2749,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_runtime38.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.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 +2764,174 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.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_runtime38.jsx)(
+            import_ui16.Button,
+            {
+              variant: allowWheelRotation ? "default" : "outline",
+              size: "sm",
+              onClick: toggleWheelRotation,
+              children: "Rotation"
+            }
+          )
+        }
+      ),
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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 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_runtime38.jsx)(
+          "div",
+          {
+            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_runtime38.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              GenrePlaylistTreeWheel,
+              {
+                scope,
+                genrePlaylists: visibleGenrePlaylists,
+                handleGenreCreationAction,
+                handleGenreRenameAction,
+                additionalActions,
+                onSelectedNodeChange: handleSelectedNodeChange,
+                hideInfoPanelClose: true,
+                hideInfoPanelTitle: true,
+                onNodeHover: handleNodeHover,
+                renderInfoPanelBody,
+                playback,
+                selectedNodeId,
+                readOnly,
+                allowWheelRotation,
+                controlsOrientation,
+                sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
+                busy,
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  floatingControlsLeading,
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                ] }) : void 0,
+                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_runtime38.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_runtime38.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              GenrePlaylistTreeWheelRadialPopCore,
+              {
+                scope,
+                genrePlaylists: visibleGenrePlaylists,
+                handleGenreCreationAction,
+                handleGenreRenameAction,
+                additionalActions,
+                onSelectedNodeChange: handleSelectedNodeChange,
+                hideInfoPanelClose: true,
+                hideInfoPanelTitle: true,
+                onNodeHover: handleNodeHover,
+                renderInfoPanelBody,
+                playback,
+                selectedNodeId,
+                readOnly,
+                allowWheelRotation,
+                controlsOrientation,
+                sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
+                busy,
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  floatingControlsLeading,
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                ] }) : void 0,
+                defaultViewport,
+                onViewportChange,
+                ...infoPanelCuration,
+                ...focus
+              }
+            ) }) })
+          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(
+            GenrePlaylistTreeWheelRadialPopCore,
             {
+              outline: true,
               scope,
               genrePlaylists: visibleGenrePlaylists,
               handleGenreCreationAction,
@@ -2460,100 +2945,45 @@ 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_runtime38.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_runtime38.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_runtime38.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime38.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
+              );
             }
-          ) }) })
-        ) : 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
-            );
-          }
-        ) }) }) })
+          ) })
+        ] }) })
       ]
     }
   );
@@ -2563,24 +2993,35 @@ function GenreTreeView({
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
-var import_react11 = require("react");
+var import_react14 = require("react");
+var import_lucide_react16 = require("lucide-react");
+var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
 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_runtime39 = require("react/jsx-runtime");
+var useBrowserLayoutEffect = typeof window === "undefined" ? import_react14.useEffect : import_react14.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_tree18.useTrackList)();
   const trackNoun = (0, import_track_noun7.useTrackNoun)();
-  const loadMoreSentinelRef = (0, import_react11.useRef)(null);
+  const trackListRef = (0, import_react14.useRef)(null);
+  const previousOriginRef = (0, import_react14.useRef)(trackList?.origin ?? null);
+  const handledAutoAdvanceRequestIdRef = (0, import_react14.useRef)(null);
+  const shouldFollowPlaybackRef = (0, import_react14.useRef)(true);
+  const programmaticScrollTopRef = (0, import_react14.useRef)(null);
+  const userScrollIntentRef = (0, import_react14.useRef)(false);
+  const userScrollIntentTimerRef = (0, import_react14.useRef)(null);
+  const loadMoreSentinelRef = (0, import_react14.useRef)(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const sentinel = loadMoreSentinelRef.current;
     if (!hasMore || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -2591,44 +3032,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_react14.useEffect)(() => {
+    const list = trackListRef.current;
+    if (!isCollapsed && list?.scrollTop === 0) shouldFollowPlaybackRef.current = true;
+  }, [isCollapsed]);
+  (0, import_react14.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_runtime39.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_runtime39.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+              trackList.origin.type === import_genre_tree19.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree19.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_runtime39.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_runtime39.jsx)(import_lucide_react16.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 TrackItem,
                 {
                   track,
@@ -2638,7 +3150,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_runtime39.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -2648,42 +3160,162 @@ function TrackListSidebar({
 }
 // src/genre-tree/PlayerPanel.tsx
-var import_react12 = require("react");
-var import_lucide_react13 = require("lucide-react");
+var import_react15 = require("react");
 var import_tailwind_merge2 = require("tailwind-merge");
+var import_player12 = require("@behindthemusictree/app-kit/player");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
+// src/genre-tree/PlayerControls.tsx
+var import_lucide_react17 = require("lucide-react");
+var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player11 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime40 = 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_tree20.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_runtime40.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_runtime40.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree20.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree20.formatTime)(safeDuration) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(import_lucide_react17.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(import_lucide_react17.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(import_lucide_react17.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(import_lucide_react17.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime41 = 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 { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree22.useTrackListSidebarVisibility)();
-  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react12.useState)(false);
+  const { playerTrackObject } = (0, import_player12.usePlayer)();
+  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree21.useTrackListSidebarVisibility)();
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react15.useState)("");
+  const loadedTrackTitle = playerTrackObject?.track.title;
+  (0, import_react15.useEffect)(() => {
+    if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
+  }, [loadedTrackTitle]);
+  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react15.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_runtime41.jsxs)(
     "div",
     {
       id: PANEL_ID,
@@ -2692,11 +3324,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_runtime41.jsx)(
           PanelEdgeTab,
           {
             side: "right",
@@ -2706,7 +3338,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge2.twMerge)(
@@ -2714,29 +3346,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_runtime41.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_player12.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(PlayerControls, {})
               ] }),
-              isTrackListSidebarVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.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"
@@ -2755,33 +3379,33 @@ function PlayerPanel({
 // src/genre-tree/Rating.tsx
 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_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime42 = 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_runtime42.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "input",
       {
         id: `star-${instanceId}-${i}`,
         className: "w-6 h-6 opacity-0",
         type: "radio",
         name: "rating",
-        value: i === 0 ? import_genre_tree23.FORM_RATING_NULL_VALUE : i,
+        value: i === 0 ? import_genre_tree22.FORM_RATING_NULL_VALUE : i,
         checked: rating === (i === 0 ? null : i),
         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_runtime42.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.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)]"}`
+          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree22.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_runtime42.jsx)("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.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)]"}`
@@ -2810,6 +3434,7 @@ function Rating({ rating, handleChange }) {
   PopupTitle,
   Rating,
   SpotifyAuthErrorPopup,
+  Toast,
   TrackItem,
   TrackListSidebar,
   TrackPositionPlayPause,