@behindthemusictree/app-kit-ui 42.0.2 → 43.1.0

package/dist/index.cjs

@@ -589,14 +589,14 @@ function AuthCallbackHandler({ renderStatus, ...options }) {
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
 var import_lucide_react17 = require("lucide-react");
 var import_lucide_react18 = require("lucide-react");
-var import_ui24 = require("@behindthemusictree/ui");
+var import_ui26 = require("@behindthemusictree/ui");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
-var import_genre_tree30 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree31 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree32 = require("@behindthemusictree/app-kit/genre-tree");
 var import_popup5 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/playlist-tree/size-metric.ts
@@ -1049,6 +1049,8 @@ function SearchBox({
   onClear,
   clearLabel,
   leading,
+  trailingAction,
+  trailingActionBreakpoint,
   className: className2,
   onFocus
 }) {
@@ -1081,6 +1083,8 @@ function SearchBox({
       onClear,
       clearLabel,
       leading,
+      trailingAction,
+      trailingActionBreakpoint,
       inputClassName: "focus-visible:ring-0"
     }
   ) });
@@ -1181,7 +1185,10 @@ function GenreSearch({
   placeholder,
   onQueryChange,
   extraGroups = [],
-  onFocus
+  onFocus,
+  trailingAction,
+  trailingActionBreakpoint,
+  fullWidthBreakpoint = "md"
 }) {
   const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree9.useGenreSearch)({
     genrePlaylists,
@@ -1209,7 +1216,7 @@ function GenreSearch({
       (group) => active ? group : { ...group, items: [], status: "", loading: false }
     )
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "genre-search w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `genre-search w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 ${fullWidthBreakpoint === "sm" ? "max-sm:w-full sm:max-md:max-w-sm" : "max-md:w-full"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     SearchBox,
     {
       label,
@@ -1230,7 +1237,9 @@ function GenreSearch({
         onQueryChange?.("");
       } : void 0,
       leading: onPrevious && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Previous", title: "Previous", className: import_ui7.SEARCH_LEADING_BUTTON_CLASS, onClick: onPrevious, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "h-4 w-4" }) }),
-      onFocus
+      onFocus,
+      trailingAction,
+      trailingActionBreakpoint
     }
   ) });
 }
@@ -1274,38 +1283,86 @@ function GenreTreeSearch({
   return SearchGroups ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SearchGroups, { query: deferredQuery, focused, onSelectGenre, children: render }) : render([]);
 }
 
+// src/genre-tree/GenreOverviewDetailPanel.tsx
+var import_react10 = require("react");
+var import_ui8 = require("@behindthemusictree/ui");
+var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
+
+// src/genre-tree/CommonsPhoto.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ExternalLink({ href, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+}
+function CommonsPhotoCredit({ image, creditLabel = "Photo" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-caption text-[var(--color-text-muted)]", children: [
+    creditLabel,
+    ": ",
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+    ",",
+    " ",
+    image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+  ] });
+}
+function CommonsCover({ image, alt }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: image.url, alt, className: "h-64 w-full object-cover bg-[var(--color-surface-muted)]" });
+}
+function CommonsPhoto({
+  image,
+  alt,
+  creditLabel = "Photo"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("figure", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: image.url, alt, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("figcaption", { className: "text-caption text-[var(--color-text-muted)]", children: [
+      creditLabel,
+      ": ",
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      ",",
+      " ",
+      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+    ] })
+  ] });
+}
+
+// src/genre-tree/GenreOverviewDetailPanel.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var GenreOverviewDetailPanel = (0, import_react10.forwardRef)(function GenreOverviewDetailPanel2({ genreUuid, scope, getBackendBaseUrl, criteriaOverviewSchema, cover, ...props }, ref) {
+  const { data: overview } = (0, import_genre_tree10.useFetchGenreOverview)(genreUuid, scope, getBackendBaseUrl, criteriaOverviewSchema);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui8.DetailPanel, { ...props, ref, cover: genreUuid && overview?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CommonsCover, { image: overview.image, alt: overview.name }) : cover });
+});
+
 // src/genre-tree/GenreDetailPanel.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
-var import_ui13 = require("@behindthemusictree/ui");
+var import_ui14 = require("@behindthemusictree/ui");
 var import_lucide_react13 = require("lucide-react");
-var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/GenreInfoPanelBody.tsx
-var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/GenreActionBand.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_ui9 = require("@behindthemusictree/ui");
+var import_ui10 = require("@behindthemusictree/ui");
 
 // src/genre-tree/ShareActionButton.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_ui8 = require("@behindthemusictree/ui");
+var import_ui9 = require("@behindthemusictree/ui");
 var import_popup3 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/SharePopup.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_fa3 = require("react-icons/fa");
 var import_si = require("react-icons/si");
 
 // src/genre-tree/ShareDestinationButton.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = 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-caption 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_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("span", { className: "max-w-full truncate", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("span", { className: "max-w-full truncate", children: label })
   ] });
 }
 function ShareDestinationButton({
@@ -1317,29 +1374,29 @@ function ShareDestinationButton({
   ariaLabel
 }) {
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Contents, { icon, label }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Contents, { icon, label }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Contents, { icon, label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Contents, { icon, label }) });
 }
 
 // src/genre-tree/SharePreviewCard.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SharePreviewCard({ target, url }) {
   const Icon = { genre: import_lucide_react8.Music2, artist: import_lucide_react8.UserRound, song: import_lucide_react8.Music }[target.kind];
   const typeLabel = { genre: "Genre", artist: "Artist", song: "Song" }[target.kind];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-caption font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-body text-[var(--color-primary)]", title: url, children: url })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-caption font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "truncate text-body text-[var(--color-primary)]", title: url, children: url })
     ] })
   ] }) });
 }
 
 // src/genre-tree/SharePopup.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function resolveAbsoluteUrl(url) {
   try {
     const parsed = new URL(url, window.location.href);
@@ -1372,20 +1429,20 @@ async function copyText(text) {
   }
 }
 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)(() => {
+  const [absoluteUrl, setAbsoluteUrl] = (0, import_react11.useState)(url);
+  const [copyStatus, setCopyStatus] = (0, import_react11.useState)("idle");
+  const [canUseNativeShare, setCanUseNativeShare] = (0, import_react11.useState)(false);
+  const [shareError, setShareError] = (0, import_react11.useState)(null);
+  const [toastId, setToastId] = (0, import_react11.useState)(0);
+  (0, import_react11.useEffect)(() => {
     setAbsoluteUrl(resolveAbsoluteUrl(url) ?? "");
     setCopyStatus("idle");
     setShareError(null);
   }, [url]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCanUseNativeShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
   }, []);
-  const destinationUrls = (0, import_react10.useMemo)(() => {
+  const destinationUrls = (0, import_react11.useMemo)(() => {
     if (!absoluteUrl) return null;
     const message = `${target.name} \u2014 ${absoluteUrl}`;
     return {
@@ -1403,7 +1460,7 @@ function SharePopup({ target, url, onClose }) {
     setCopyStatus(copied ? "idle" : "failed");
     if (copied) setToastId((id) => id + 1);
   };
-  const dismissToast = (0, import_react10.useCallback)(() => setToastId(0), []);
+  const dismissToast = (0, import_react11.useCallback)(() => setToastId(0), []);
   const handleNativeShare = async () => {
     if (!absoluteUrl || !navigator.share) return;
     setShareError(null);
@@ -1414,8 +1471,8 @@ function SharePopup({ target, url, onClose }) {
       setShareError("Could not open the share options.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       BasePopup_default,
       {
         title: "Share",
@@ -1430,70 +1487,70 @@ function SharePopup({ target, url, onClose }) {
         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_runtime25.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(
               ShareDestinationButton,
               {
                 label: "Copy Link",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               ShareDestinationButton,
               {
                 label: "WhatsApp",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
                 href: destinationUrls?.whatsapp,
                 ariaLabel: `Share ${target.name} via WhatsApp`,
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               ShareDestinationButton,
               {
                 label: "Gmail",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
                 href: destinationUrls?.gmail,
                 ariaLabel: `Email ${target.name} with Gmail`,
                 disabled: !absoluteUrl
               }
             ),
-            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               ShareDestinationButton,
               {
                 label: "More",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: "Could not copy the link." }),
-          shareError && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: shareError })
+          copyStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: shareError })
         ] })
       }
     ),
-    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
   ] });
 }
 
 // src/genre-tree/ShareActionButton.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ShareActionButton({ target, url }) {
   const { showPopup, hidePopup } = (0, import_popup3.usePopup)();
   const openSharePopup = () => {
-    showPopup(/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SharePopup, { target, url, onClose: hidePopup }));
+    showPopup(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SharePopup, { target, url, onClose: hidePopup }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_ui8.ActionButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_ui9.ActionButton,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }),
       label: "Share",
       "aria-label": `Share ${target.name}`,
       title: `Share ${target.name}`,
@@ -1503,7 +1560,7 @@ function ShareActionButton({ target, url }) {
 }
 
 // src/genre-tree/GenreActionBand.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function GenreActionBand({
   node,
   playActions,
@@ -1524,24 +1581,24 @@ function GenreActionBand({
     items.push({
       key: "zoom-in",
       label: "Focus",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime27.jsx)(import_lucide_react11.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime27.jsx)(import_lucide_react11.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime27.jsx)(import_lucide_react11.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime27.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onToggleSide,
       disabled: !!toggleSideDisabledReason,
       title: toggleSideDisabledReason
@@ -1556,17 +1613,17 @@ function GenreActionBand({
       disabled: action.enabled ? !action.enabled(node) : false
     });
   }
-  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui9.ActionButton, { icon: item.icon, label: item.label, disabled: item.disabled, title: item.title, onClick: item.onClick }, item.key));
+  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui10.ActionButton, { icon: item.icon, label: item.label, disabled: item.disabled, title: item.title, onClick: item.onClick }, item.key));
   if (!playActions && items.length === 0 && adminItems.length === 0 && !(shareTarget && shareUrl)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui9.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-    import_ui9.ActionBand,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui10.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_ui10.ActionBand,
     {
       className: "genre-action-band",
       section: { title: "Admin", label: "Admin actions", children: renderItems(adminItems) },
       children: [
         playActions,
         renderItems(items),
-        shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+        shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
       ]
     }
   ) });
@@ -1574,12 +1631,12 @@ function GenreActionBand({
 
 // src/genre-tree/GenrePlayActions.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_ui10 = require("@behindthemusictree/ui");
-var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui11 = require("@behindthemusictree/ui");
+var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player4 = require("@behindthemusictree/app-kit/player");
 
 // src/genre-tree/RegionGlobeIcon.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/genre-tree/regionGlobePaths.ts
 var REGION_GLOBE_PATHS = {
@@ -1590,11 +1647,11 @@ var REGION_GLOBE_PATHS = {
 var REGION_GLOBES = ["africa", "americas", "asia"];
 
 // src/genre-tree/RegionGlobeIcon.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var ROTATION_INTERVAL_MS = 3e3;
 function RegionGlobeIcon({ className: className2 }) {
-  const [index, setIndex] = (0, import_react11.useState)(0);
-  (0, import_react11.useEffect)(() => {
+  const [index, setIndex] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => {
     const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
     let timer;
     const sync = () => {
@@ -1608,51 +1665,51 @@ function RegionGlobeIcon({ className: className2 }) {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { viewBox: "0 0 512 512", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { "data-testid": "region-globe-path", d: REGION_GLOBE_PATHS[REGION_GLOBES[index]] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { viewBox: "0 0 512 512", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { "data-testid": "region-globe-path", d: REGION_GLOBE_PATHS[REGION_GLOBES[index]] }) });
 }
 
 // src/genre-tree/treeMarkPath.ts
 var TREE_MARK_PATH = "M3171 5598 c-5 -13 -5 -24 0 -26 5 -2 9 -16 9 -31 0 -25 -3 -28 -25 -23 l-25 4 0 -116 c0 -64 3 -116 8 -116 10 0 32 51 26 61 -3 5 -1 9 4 9 5 0 15 12 21 28 7 15 26 36 43 47 30 20 88 105 71 105 -4 0 -33 -21 -62 -47 l-54 -47 6 63 c4 35 7 72 7 82 0 10 9 19 23 22 16 3 13 5 -11 6 -25 1 -35 -4 -41 -21z M2893 5485 c8 -76 24 -100 71 -100 l36 0 0 53 c0 58 -15 69 -28 20 -8 -29 -10 -30 -16 -13 -15 43 -42 89 -55 93 -11 4 -13 -6 -8 -53z M2484 5438 c8 -70 49 -169 54 -131 2 12 10 27 18 33 17 15 19 84 3 129 -9 27 -16 31 -46 31 l-36 0 7 -62z M2625 5448 c-7 -22 -24 -121 -31 -179 l-6 -57 -27 11 c-15 5 -32 19 -37 31 -9 21 -88 86 -105 86 -39 0 38 -104 118 -158 17 -12 56 -59 86 -105 30 -45 67 -92 81 -104 14 -13 26 -30 26 -38 0 -13 -9 -11 -45 11 -67 39 -58 10 21 -66 67 -65 96 -110 108 -167 4 -17 13 -34 20 -36 20 -8 66 -186 75 -289 13 -161 -8 -272 -72 -365 -12 -18 -30 -33 -39 -33 -23 0 -53 33 -79 89 -25 54 -69 112 -121 162 -35 33 -38 40 -38 92 0 58 36 172 79 252 25 47 29 125 6 125 -19 0 -30 -22 -50 -100 -9 -35 -24 -78 -32 -94 l-16 -30 -19 24 -20 25 7 -58 c8 -62 0 -127 -16 -127 -19 0 -122 107 -166 172 -52 79 -68 150 -60 273 8 108 17 129 67 149 58 23 97 64 105 109 9 47 -5 49 -63 6 l-42 -30 15 35 c17 41 20 102 5 111 -18 11 -45 -4 -64 -36 -11 -19 -20 -60 -23 -110 -4 -54 -10 -79 -18 -79 -20 0 -27 28 -30 108 -2 40 -6 76 -9 79 -3 4 -6 51 -6 105 0 86 -3 101 -21 119 -27 27 -42 20 -53 -24 -7 -28 -5 -51 7 -90 9 -30 17 -76 17 -103 l0 -49 -29 51 c-29 49 -92 114 -111 114 -6 0 -10 -11 -10 -25 0 -14 5 -25 10 -25 6 0 10 -6 10 -13 0 -7 23 -44 51 -82 61 -84 59 -82 52 -57 -3 14 2 24 15 31 12 6 23 23 25 38 2 16 5 2 6 -29 1 -46 -2 -58 -14 -58 -21 0 -19 -13 10 -70 22 -44 25 -61 25 -165 l0 -116 -47 27 c-65 36 -142 118 -176 187 -15 31 -37 62 -49 68 -21 11 -21 10 -15 -41 l6 -52 -29 6 c-37 7 -39 -7 -4 -31 14 -10 53 -40 86 -68 92 -76 130 -104 163 -119 39 -19 101 -84 109 -116 10 -42 50 -88 217 -245 50 -47 94 -102 134 -167 33 -54 65 -98 71 -98 17 0 45 -79 51 -145 4 -47 0 -76 -20 -135 -14 -41 -39 -121 -56 -177 -18 -57 -35 -103 -40 -103 -4 0 -26 13 -49 30 -31 22 -50 49 -82 117 -99 209 -116 241 -185 337 -123 172 -123 173 -128 311 -5 140 -29 245 -57 245 -12 0 -20 -11 -24 -31 -9 -46 -7 -108 3 -127 14 -26 25 -162 14 -162 -20 0 -160 99 -192 135 -19 22 -42 58 -52 80 -10 23 -27 52 -37 66 -10 13 -26 38 -34 54 -9 17 -23 45 -33 64 -15 29 -16 40 -6 80 31 116 34 139 27 205 -7 57 -11 69 -28 74 -14 3 -32 30 -54 79 -21 46 -39 73 -47 70 -13 -5 -14 -15 -3 -65 l8 -33 -49 25 c-61 31 -93 40 -93 27 0 -13 43 -41 122 -79 47 -22 72 -41 83 -61 19 -38 19 -51 0 -51 -12 0 -15 -15 -16 -72 -1 -79 -12 -134 -22 -108 -3 8 -10 48 -16 89 -14 89 -25 111 -54 111 -38 0 -50 -15 -45 -54 4 -40 2 -42 -26 -21 -29 22 -36 19 -36 -20 0 -39 39 -85 125 -145 38 -27 62 -56 99 -120 45 -79 82 -177 70 -189 -2 -3 -42 3 -87 13 -45 10 -99 21 -119 26 -47 9 -103 51 -125 93 -24 44 -83 203 -94 252 -5 25 -4 59 3 91 14 68 3 140 -23 155 -12 6 -23 8 -27 5 -14 -15 -13 -115 2 -159 39 -116 0 -116 -70 1 -22 36 -31 42 -59 42 -20 0 -35 6 -39 15 -6 16 -56 21 -56 6 0 -5 23 -25 51 -44 53 -36 158 -156 188 -216 10 -20 26 -60 36 -88 11 -29 25 -53 32 -53 8 0 13 -12 13 -30 0 -26 -4 -30 -27 -31 l-28 -1 25 -7 c26 -8 177 -87 196 -102 5 -4 50 -18 100 -29 122 -29 277 -78 300 -95 10 -8 26 -15 34 -15 35 0 160 -166 160 -212 0 -22 -32 -24 -50 -4 -11 14 -100 46 -165 61 -16 3 -68 25 -115 48 -102 49 -163 56 -168 19 -9 -62 58 -104 178 -112 63 -5 103 -14 155 -37 39 -16 91 -38 117 -47 26 -9 74 -35 106 -56 52 -33 65 -48 96 -112 20 -40 39 -95 43 -122 6 -47 6 -48 -18 -41 -33 10 -69 33 -69 45 0 6 -10 10 -23 10 -13 0 -27 4 -32 9 -6 5 -27 14 -47 20 -20 7 -53 23 -73 37 -43 29 -45 29 -45 7 0 -26 80 -96 145 -127 119 -56 274 -185 311 -259 55 -107 104 -410 104 -640 0 -162 -22 -325 -45 -333 -25 -10 -72 25 -168 123 -129 131 -140 148 -182 274 -20 60 -50 142 -66 181 -16 39 -45 131 -65 202 -24 93 -55 173 -104 274 -77 158 -78 166 -32 256 31 64 27 129 -12 181 -31 40 -39 42 -65 18 -51 -49 -55 -120 -11 -208 37 -74 37 -85 3 -85 -36 0 -94 65 -137 154 -18 39 -37 80 -40 92 -3 11 -14 29 -24 40 -10 10 -28 35 -42 54 -13 19 -40 55 -61 80 -20 25 -41 63 -47 85 -6 22 -16 62 -23 89 -20 81 -95 147 -113 100 -18 -47 -6 -92 39 -147 25 -31 45 -61 45 -67 0 -15 -42 -3 -116 31 -94 44 -156 124 -184 235 -9 36 -13 41 -38 40 -39 -2 -144 113 -186 205 -31 66 -33 68 -53 54 -11 -8 -24 -11 -27 -7 -4 4 11 -24 33 -62 39 -67 43 -86 18 -86 -8 0 -8 3 1 9 11 6 9 9 -7 14 -11 3 -25 -1 -31 -7 -7 -10 0 -16 29 -24 39 -12 203 -147 215 -178 13 -34 4 -35 -48 -6 -64 37 -126 51 -126 30 0 -26 55 -67 125 -92 46 -16 80 -36 100 -58 l29 -33 -54 -3 c-79 -5 -203 14 -249 38 -47 24 -70 54 -105 140 -43 105 -115 163 -103 83 3 -21 9 -47 13 -57 4 -11 -15 4 -42 32 -62 64 -84 67 -84 14 0 -41 24 -76 61 -87 16 -6 18 -9 8 -15 -23 -15 15 -45 117 -91 52 -24 93 -48 91 -54 -10 -28 -150 -28 -190 0 -21 15 -47 5 -47 -17 0 -5 -10 -19 -22 -29 -23 -20 -23 -20 112 -14 174 8 208 8 430 0 l185 -7 84 -41 c115 -57 180 -118 225 -212 20 -41 36 -77 36 -80 0 -14 89 -126 150 -190 74 -78 120 -144 120 -175 0 -30 10 -33 -201 52 -94 38 -131 71 -218 195 -27 37 -59 77 -71 88 l-23 20 7 -40 c4 -22 12 -44 17 -49 13 -14 11 -26 -4 -26 -7 0 -29 21 -48 48 -33 45 -34 51 -39 159 -4 89 -9 116 -22 130 -17 16 -18 16 -18 0 0 -9 -7 -17 -16 -17 -14 0 -16 -9 -11 -62 3 -35 8 -74 12 -88 l7 -25 -25 27 c-41 44 -127 118 -137 118 -18 0 -10 -57 12 -85 18 -24 20 -32 10 -57 -10 -28 -9 -30 22 -43 18 -8 54 -19 79 -26 36 -9 60 -24 99 -66 80 -83 80 -83 1 -83 -80 0 -176 21 -236 51 -107 54 -234 169 -252 228 -4 14 -12 29 -17 35 -5 6 -18 25 -28 43 -24 40 -90 64 -116 42 -22 -18 -13 -84 17 -116 13 -13 42 -32 64 -42 22 -10 74 -53 115 -96 l75 -77 -75 5 c-135 8 -243 76 -336 207 -31 44 -65 87 -77 95 -37 26 -34 -9 7 -88 20 -39 34 -72 31 -75 -2 -2 -26 11 -52 31 -90 65 -143 83 -143 49 0 -32 71 -88 150 -117 41 -15 113 -47 159 -71 46 -24 99 -46 118 -50 18 -3 33 -12 33 -18 0 -12 -111 -46 -149 -46 -12 0 -29 -8 -39 -17 -10 -10 -27 -19 -37 -19 -11 -1 -45 -9 -75 -17 -58 -16 -110 -62 -110 -97 0 -39 116 -45 167 -9 11 8 34 31 52 51 28 32 50 43 144 74 145 47 222 48 404 5 70 -17 177 -38 237 -47 128 -19 202 -43 250 -79 18 -14 73 -42 122 -61 164 -66 208 -112 243 -251 36 -141 27 -167 -44 -123 -19 12 -63 23 -111 28 -117 13 -134 25 -275 193 -63 74 -193 151 -266 157 -29 2 -66 -1 -81 -7 -24 -10 -37 -9 -80 8 -66 26 -70 9 -11 -44 72 -65 119 -80 239 -78 60 1 109 -2 117 -8 6 -6 26 -35 42 -64 17 -30 46 -64 64 -77 19 -13 49 -40 67 -61 l34 -39 -79 3 c-57 3 -80 0 -83 -9 -3 -10 -7 -10 -18 -1 -8 6 -11 15 -8 20 3 5 0 9 -5 9 -16 0 -13 -16 6 -36 36 -36 78 -44 227 -44 119 0 152 -3 188 -19 56 -24 95 -64 125 -126 13 -27 35 -68 48 -90 14 -22 25 -53 25 -69 l0 -29 -107 5 c-131 6 -193 28 -290 100 -37 28 -82 56 -98 63 -75 32 -176 123 -277 247 -34 42 -122 98 -134 85 -5 -5 103 -138 184 -226 52 -57 46 -61 -49 -31 -87 28 -173 85 -325 214 -144 123 -189 151 -254 159 -25 2 -39 3 -32 0 6 -3 12 -16 12 -29 0 -17 -4 -23 -12 -19 -7 4 -1 -5 15 -19 15 -14 46 -30 70 -36 23 -6 60 -17 82 -25 l40 -13 -52 -1 c-49 -1 -53 -3 -53 -25 0 -28 28 -36 122 -36 54 0 62 -3 91 -32 l32 -33 -52 -3 c-88 -5 -75 -26 39 -62 130 -41 178 -63 206 -93 l22 -24 -20 -18 c-12 -11 -41 -20 -74 -23 -48 -4 -60 0 -116 32 -118 69 -241 96 -279 62 -13 -12 -40 -16 -104 -16 -48 0 -95 4 -105 9 -9 5 -34 16 -55 25 -20 9 -76 53 -122 97 -47 45 -88 79 -91 76 -12 -12 6 -54 41 -100 l36 -47 -74 0 c-88 0 -112 15 -78 49 26 26 21 39 -34 84 -87 73 -132 32 -50 -45 25 -23 45 -46 45 -50 0 -4 -21 2 -46 12 -45 20 -114 27 -114 12 0 -4 16 -22 35 -40 39 -38 78 -47 255 -61 164 -14 178 -17 172 -47 -2 -13 -2 -30 2 -39 5 -13 9 -13 40 2 19 9 33 20 30 25 -4 5 4 4 15 -4 21 -13 20 -15 -44 -74 -36 -33 -65 -66 -65 -72 0 -21 68 15 142 74 38 30 84 62 103 70 73 30 203 11 312 -46 32 -17 82 -33 111 -37 l53 -6 -28 -30 c-15 -16 -44 -40 -63 -52 -63 -42 -100 -82 -100 -111 0 -25 2 -26 37 -21 28 5 47 17 73 49 65 78 175 183 224 216 34 22 61 32 88 32 43 0 122 -36 152 -69 10 -11 39 -32 62 -46 43 -25 53 -46 36 -72 -11 -17 -200 -86 -232 -85 -28 1 -122 -47 -127 -65 -3 -8 14 -13 54 -15 l58 -3 -65 -44 c-36 -25 -68 -49 -71 -53 -11 -17 -115 -10 -188 12 -105 32 -112 11 -14 -39 l56 -28 -40 -6 c-52 -9 -96 0 -154 29 -31 15 -50 19 -60 13 -15 -10 -16 -10 44 -47 20 -13 37 -27 37 -31 0 -15 -144 -71 -205 -81 -33 -5 -85 -10 -116 -10 -32 0 -63 -6 -75 -14 -18 -13 -15 -15 34 -22 l53 -7 -31 -18 c-18 -12 -30 -27 -30 -40 0 -21 4 -21 61 -16 50 4 75 14 145 57 46 28 112 63 146 77 62 24 191 62 215 63 22 0 -47 -103 -107 -161 -42 -41 -60 -66 -65 -92 -10 -49 0 -60 47 -54 65 9 99 53 124 160 20 83 49 133 94 163 22 15 40 30 40 34 0 4 8 10 18 13 9 3 31 15 49 27 31 21 31 21 26 0 -3 -11 -21 -37 -40 -58 -43 -45 -72 -106 -73 -150 0 -39 18 -49 56 -30 38 18 63 64 75 137 13 82 40 142 89 194 22 24 40 49 40 54 0 6 24 21 53 34 49 22 63 23 237 20 193 -2 278 -14 348 -50 21 -11 44 -27 52 -36 7 -9 32 -27 55 -41 49 -28 138 -147 184 -243 16 -35 42 -114 57 -175 35 -147 31 -268 -14 -436 -17 -63 -37 -166 -45 -227 -12 -94 -21 -127 -54 -195 -22 -46 -52 -94 -67 -108 -15 -14 -46 -44 -68 -67 -23 -24 -47 -43 -53 -43 -7 0 -25 -12 -41 -26 -129 -121 -526 -267 -721 -268 -104 0 -109 -15 -19 -57 75 -35 67 -35 221 -10 125 21 235 27 235 13 0 -16 -66 -72 -85 -72 -24 0 -85 -36 -85 -49 0 -14 12 -19 58 -27 35 -5 42 -4 42 10 0 9 5 17 10 17 28 4 74 20 80 29 9 14 226 119 288 139 63 21 215 43 239 34 32 -12 12 -50 -52 -102 -36 -28 -73 -55 -83 -58 -17 -7 -66 -39 -92 -60 -8 -7 -38 -32 -67 -57 l-52 -45 42 -6 c36 -6 54 -1 122 33 44 22 120 56 169 76 112 45 222 107 289 164 46 40 84 62 107 62 18 0 130 -83 130 -96 0 -8 4 -14 10 -14 5 0 39 -26 75 -59 36 -32 96 -76 132 -97 36 -21 68 -46 71 -56 5 -19 21 -22 59 -12 18 5 20 9 10 19 -7 7 -69 71 -139 143 -147 149 -161 179 -80 168 136 -19 195 -39 378 -128 78 -37 147 -68 152 -68 6 0 15 -7 20 -16 8 -14 14 -15 46 -4 l38 12 -104 57 c-125 69 -148 84 -148 93 0 16 94 7 223 -22 74 -17 146 -30 160 -30 14 0 29 -4 32 -10 7 -11 54 6 115 43 l40 24 -38 1 c-22 1 -68 11 -103 21 -35 11 -107 30 -159 41 -131 31 -295 99 -406 171 -235 153 -355 366 -357 634 -1 211 65 343 285 568 117 119 206 167 368 198 153 29 267 59 328 86 80 35 166 44 264 27 148 -26 167 -38 251 -169 71 -110 136 -165 196 -165 26 0 31 4 31 23 -1 32 -28 62 -87 91 -39 20 -66 45 -118 112 -95 123 -95 135 -5 92 25 -12 77 -31 116 -43 56 -17 76 -19 97 -10 27 11 26 11 -25 29 -113 39 -138 49 -138 57 0 14 91 55 153 68 33 7 75 10 95 7 27 -4 31 -3 17 4 -19 8 -19 9 3 9 12 1 22 7 22 15 0 10 7 12 22 8 12 -3 17 -7 10 -10 -6 -2 -12 -10 -12 -18 0 -8 -6 -14 -12 -15 -27 -2 39 -17 80 -18 29 -1 42 3 42 13 0 20 -19 32 -67 45 -49 13 -53 22 -20 44 49 32 128 39 235 21 56 -9 112 -14 126 -10 26 6 96 69 96 86 0 6 -32 10 -77 10 -84 0 -126 -7 -118 -20 9 -14 -17 -24 -67 -24 -34 -1 -48 3 -48 13 0 8 -7 11 -20 8 -17 -4 -18 -2 -9 14 5 11 14 17 20 14 5 -4 9 0 9 8 0 8 16 35 35 60 35 45 35 46 14 57 -18 10 -23 8 -37 -12 -67 -95 -162 -167 -297 -225 -55 -23 -99 -47 -98 -53 2 -5 -6 -10 -18 -10 -27 0 -23 8 31 71 100 117 116 131 161 155 80 40 80 70 1 41 l-47 -18 36 38 c47 49 59 73 59 120 0 67 -24 80 -82 46 -49 -29 -76 -85 -89 -183 -10 -81 -9 -80 -89 -174 -20 -22 -43 -53 -53 -68 -28 -45 -89 -61 -217 -56 -70 2 -114 8 -118 15 -4 6 -28 13 -54 15 l-46 3 53 71 c51 68 100 104 140 104 50 0 125 73 125 122 0 30 0 31 -45 26 -28 -4 -59 -16 -82 -34 -30 -23 -35 -24 -28 -8 22 51 37 105 31 111 -13 13 -47 -34 -105 -146 -72 -138 -171 -248 -261 -292 -62 -30 -164 -44 -242 -34 -48 7 -50 8 -45 34 14 70 51 144 95 190 42 43 56 51 127 69 44 12 98 24 120 27 99 15 155 57 155 117 l0 31 -51 -5 c-40 -4 -58 -12 -87 -40 -56 -52 -66 -58 -131 -78 l-60 -18 10 27 c6 14 36 62 68 106 70 96 91 136 91 170 0 41 -18 29 -50 -35 -30 -59 -31 -60 -74 -60 -56 0 -71 -18 -101 -115 -23 -75 -43 -114 -72 -145 -8 -8 -41 -61 -73 -117 -35 -59 -75 -113 -95 -128 -37 -29 -177 -85 -210 -85 -35 0 -222 -134 -282 -202 -31 -35 -64 -64 -72 -66 -22 -4 -68 116 -88 223 -20 113 -5 256 37 340 37 76 124 182 195 238 140 110 221 137 416 137 136 0 171 6 186 28 9 15 2 17 -76 18 -47 0 -127 4 -178 9 -167 15 -274 -28 -423 -170 -72 -68 -114 -95 -128 -81 -12 12 17 138 44 194 64 132 229 243 439 298 182 46 319 21 425 -80 68 -65 144 -115 202 -135 119 -41 155 -32 72 17 -88 52 -224 144 -224 152 0 14 51 20 210 22 115 2 160 0 175 -10 19 -12 18 -13 -8 -9 -36 6 -45 -9 -11 -17 56 -15 117 -51 183 -110 66 -59 119 -86 169 -86 54 0 31 59 -35 90 -167 77 -176 82 -158 93 25 13 138 -8 201 -37 27 -13 67 -43 89 -66 50 -53 84 -70 134 -70 37 0 71 19 71 40 0 24 -62 57 -129 70 -40 7 -74 17 -77 22 -3 4 24 8 60 8 36 0 68 -4 71 -10 3 -5 26 -10 51 -10 50 0 57 15 23 46 -24 21 -113 25 -226 10 -50 -7 -65 -6 -77 7 -19 18 -100 37 -160 37 -74 0 -136 12 -136 26 0 17 11 23 53 28 32 4 83 29 97 47 8 10 71 40 99 47 28 7 159 8 309 1 50 -2 92 -1 92 4 0 4 14 7 30 7 23 0 30 -4 30 -20 0 -15 -7 -20 -25 -20 -42 0 -28 -17 30 -39 75 -28 103 -27 117 4 8 18 19 25 38 25 34 0 47 35 23 62 -24 27 -70 31 -190 18 -101 -11 -112 -10 -173 10 -36 12 -104 24 -152 27 -49 3 -88 9 -88 13 0 8 35 26 66 35 12 3 37 21 55 40 19 20 67 58 106 86 57 39 86 52 134 60 71 11 170 58 193 91 34 49 10 51 -66 5 -52 -31 -154 -65 -165 -54 -11 12 9 25 67 47 33 12 60 26 60 30 0 5 15 17 34 28 31 18 67 84 53 98 -15 15 -69 -17 -124 -75 -35 -36 -63 -63 -63 -58 0 4 14 31 30 60 43 77 39 180 -7 151 -39 -24 -56 -62 -63 -141 -7 -87 -27 -127 -98 -200 -50 -52 -120 -103 -139 -103 -8 0 -22 -8 -31 -17 -31 -31 -26 11 12 94 33 74 61 171 53 180 -3 2 -17 1 -32 -3 -38 -10 -65 -74 -75 -185 -9 -97 -31 -147 -79 -176 -31 -20 -81 -71 -81 -83 0 -5 -24 -16 -52 -26 -29 -9 -58 -24 -64 -32 -7 -9 -33 -17 -70 -19 l-59 -4 55 48 c120 105 133 126 66 103 -19 -6 -58 -36 -88 -66 -29 -30 -72 -64 -96 -76 -41 -19 -50 -20 -163 -9 -168 16 -237 52 -196 103 21 27 121 88 143 88 60 0 183 34 234 65 30 18 74 36 97 40 85 14 180 99 131 118 -16 5 -19 13 -14 33 7 25 5 25 -26 19 -52 -11 -83 -31 -122 -76 -54 -63 -94 -86 -197 -109 -52 -12 -102 -24 -111 -26 -28 -8 -22 22 10 44 15 11 35 34 45 51 16 27 16 31 2 31 -8 0 -18 -7 -22 -16 -8 -23 -23 2 -23 40 0 23 -3 27 -12 18 -14 -14 -42 -16 -33 -2 3 6 4 10 1 10 -9 0 -37 -61 -62 -133 -29 -84 -85 -162 -137 -189 -24 -12 -67 -21 -110 -24 -40 -2 -100 -6 -134 -9 l-62 -4 36 72 c20 39 48 84 62 98 29 29 86 122 96 157 9 32 -20 29 -42 -5 -17 -27 -128 -174 -222 -297 -45 -58 -101 -96 -141 -96 -48 0 -9 184 59 284 41 59 113 107 234 156 51 20 141 67 198 102 57 36 118 72 134 80 40 21 155 46 240 53 48 5 82 14 113 32 58 34 150 44 258 28 41 -6 57 -4 75 9 17 12 46 16 111 16 88 0 116 12 57 24 -17 3 -48 6 -69 6 -21 0 -43 6 -49 14 -14 17 -8 22 40 31 30 5 36 10 32 26 -4 13 0 19 12 19 23 0 95 44 129 79 34 35 30 67 -6 55 -13 -4 -31 -7 -41 -6 -11 0 -38 -25 -68 -64 -28 -35 -53 -64 -55 -64 -2 0 7 22 21 50 14 27 25 60 25 74 0 14 5 37 11 53 7 19 7 29 0 31 -6 2 -11 17 -11 33 0 16 -4 29 -10 29 -5 0 -10 -19 -10 -42 0 -50 -37 -158 -74 -222 -28 -48 -90 -86 -141 -86 l-29 0 36 38 c20 20 43 52 52 70 16 31 16 32 -5 32 -25 0 -94 -47 -109 -75 -19 -35 -161 -104 -245 -120 -42 -8 -85 -15 -96 -15 -18 0 -18 1 -2 35 9 19 20 35 25 35 4 0 8 6 8 13 0 7 13 34 30 60 30 48 75 77 182 117 58 21 112 66 176 146 26 31 57 57 84 69 124 52 167 75 177 93 17 33 -14 35 -71 6 -29 -14 -69 -32 -89 -39 l-38 -14 20 51 c11 28 24 59 29 68 10 19 -20 60 -45 60 -18 0 -21 46 -4 52 6 2 14 26 16 53 4 43 2 52 -16 63 -20 11 -21 10 -21 -25 -1 -209 -5 -248 -32 -305 -34 -73 -116 -188 -133 -188 -8 0 -20 -6 -27 -13 -7 -7 -29 -18 -48 -24 -19 -6 -52 -18 -72 -27 -34 -15 -38 -15 -38 -1 0 35 32 73 89 109 60 37 77 51 45 39 -14 -5 -14 -3 -3 14 7 13 9 28 4 39 -5 11 -7 24 -6 29 1 6 -19 -11 -44 -37 -25 -26 -45 -44 -45 -40 0 4 18 34 40 67 30 45 40 69 40 100 0 53 -11 67 -46 63 -22 -2 -34 -13 -53 -47 -14 -25 -26 -40 -29 -33 -2 7 -10 12 -17 12 -10 0 -14 -33 -17 -142 l-4 -143 -63 -127 c-39 -81 -74 -137 -94 -154 -51 -43 -167 -87 -167 -63 0 6 26 38 58 72 32 34 66 73 75 87 18 26 23 100 8 100 -5 0 -22 -19 -38 -42 -15 -23 -52 -60 -81 -82 -31 -25 -61 -59 -74 -85 -37 -75 -125 -156 -220 -201 -46 -22 -101 -43 -121 -47 -32 -5 -37 -3 -37 13 0 36 50 229 70 269 10 23 38 95 61 160 39 116 84 211 117 248 12 13 13 20 4 29 -9 9 -21 5 -49 -18 -58 -46 -166 -272 -249 -519 -37 -110 -73 -207 -80 -216 -8 -8 -14 -21 -14 -28 0 -8 -19 -54 -41 -105 -23 -50 -61 -146 -84 -212 -49 -144 -77 -193 -152 -274 -71 -77 -89 -77 -115 2 -11 33 -27 59 -36 62 -19 6 -21 27 -23 201 -2 197 49 394 151 580 33 61 72 135 86 165 118 253 140 288 273 462 87 112 121 167 121 195 0 37 -25 27 -75 -29 -42 -48 -45 -50 -38 -23 13 50 9 145 -8 156 -19 12 -30 7 -50 -22 -23 -33 -15 -116 12 -124 28 -9 35 -49 12 -73 -10 -11 -36 -45 -58 -76 -22 -31 -44 -56 -48 -56 -12 0 -3 78 17 160 8 36 15 84 16 107 0 23 4 44 9 47 4 3 11 37 14 75 3 39 14 86 26 109 26 50 80 97 94 83 16 -16 59 -13 85 5 30 21 52 66 52 109 0 33 -2 35 -32 35 -59 0 -78 -12 -118 -69 -21 -31 -55 -74 -74 -96 l-35 -40 -1 41 c0 23 7 60 15 83 15 43 92 151 124 173 20 14 55 77 48 85 -3 2 -8 -5 -12 -16 -7 -24 -35 -17 -35 9 0 23 -13 32 -35 24 -9 -4 -12 -9 -7 -13 17 -10 2 -62 -16 -59 -11 2 -30 -24 -61 -87 -34 -68 -46 -84 -49 -67 -2 12 -8 22 -13 22 -5 0 -9 -10 -9 -22 -1 -23 -1 -23 -16 -3 -9 11 -24 37 -34 58 -11 24 -20 34 -23 25 -3 -7 -6 25 -6 72 -1 105 -21 98 -26 -10 -3 -43 -9 -76 -16 -81 -10 -6 -10 -11 0 -23 14 -16 3 -22 -15 -8 -5 4 2 -2 15 -13 51 -41 78 -76 96 -128 26 -70 25 -187 -3 -292 -13 -49 -21 -109 -20 -155 0 -104 -54 -310 -81 -310 -6 0 -11 3 -11 8 -1 44 -24 191 -41 259 l-22 85 27 108 c30 123 34 211 10 231 -20 16 -40 5 -72 -42 -21 -30 -23 -42 -18 -97 3 -36 1 -60 -4 -57 -17 11 -34 81 -34 150 -1 64 2 76 39 140 22 39 45 84 52 100 17 43 16 92 -2 98 -17 7 -17 8 -44 -73 -12 -36 -34 -87 -50 -113 -33 -56 -41 -48 -41 39 0 41 -4 54 -15 54 -11 0 -15 -18 -17 -80 -2 -45 -7 -80 -13 -80 -5 0 -10 4 -10 8 0 5 -8 16 -18 26 -58 58 -70 132 -53 314 7 69 6 92 -3 92 -6 0 -13 -6 -16 -12z m321 -503 c3 -20 4 -39 0 -42 -3 -4 -6 6 -6 20 0 17 -5 27 -15 27 -16 0 -20 12 -8 23 14 14 22 6 29 -28z m-1006 -80 c0 -8 -9 -15 -19 -15 -29 0 -35 18 -9 23 13 2 24 5 26 6 1 0 2 -6 2 -14z m327 -27 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-462 -358 c3 -5 1 -10 -4 -10 -6 0 -11 5 -11 10 0 6 2 10 4 10 3 0 8 -4 11 -10z m-835 -40 c-6 -11 -15 -20 -19 -20 -5 0 -7 9 -4 20 3 11 12 20 20 20 11 0 11 -4 3 -20z m864 -25 c3 -9 0 -15 -9 -15 -9 0 -15 -10 -16 -27 0 -27 -1 -27 -13 7 -10 25 -10 37 -2 42 18 12 33 9 40 -7z m-892 -863 c38 2 68 0 68 -4 0 -5 -33 -8 -73 -8 -49 0 -80 -5 -95 -16 -21 -14 -22 -14 -22 5 0 14 -6 21 -20 21 -11 0 -20 2 -20 4 0 2 -3 12 -6 21 -6 13 1 13 47 -5 40 -16 70 -21 121 -18z m3218 -91 c0 -10 -7 -21 -15 -25 -11 -4 -15 1 -15 19 0 16 6 25 15 25 8 0 15 -9 15 -19z m-3479 -32 c-14 -5 -30 -14 -37 -20 -8 -7 -13 -3 -17 11 -5 18 0 20 36 19 38 0 40 -1 18 -10z m3359 -572 c0 -7 -7 -22 -15 -33 -13 -17 -14 -16 -4 14 11 33 19 41 19 19z m-3345 -198 c7 -22 -7 -39 -33 -39 -10 0 -10 4 0 20 11 17 10 22 -2 30 -12 8 -11 10 7 10 13 0 24 -8 28 -21z m445 -37 c0 -23 -35 -8 -38 16 -3 21 -2 22 17 10 12 -7 21 -19 21 -26z m-310 -647 c-28 -30 -60 -33 -60 -7 0 26 9 32 48 32 l35 0 -23 -25z M3684 5414 c-14 -21 -16 -41 -10 -124 4 -62 2 -100 -3 -100 -9 0 -17 26 -25 84 -1 11 -8 22 -14 24 -9 3 -12 -27 -12 -105 0 -69 -6 -130 -16 -164 -24 -86 -24 -85 -33 -70 -6 9 -10 3 -14 -17 -4 -20 -23 -43 -59 -72 -29 -23 -54 -46 -54 -51 -1 -5 -3 -39 -4 -76 -1 -46 -4 -60 -9 -43 -6 21 -9 15 -20 -35 -16 -74 -29 -99 -97 -197 -35 -49 -54 -86 -54 -105 0 -31 59 -200 60 -171 0 9 6 21 14 25 13 7 13 16 0 68 -17 72 -12 78 75 93 106 19 127 33 145 95 20 70 65 111 186 172 83 42 89 47 75 62 -9 8 -14 23 -11 32 5 14 5 14 -6 1 -7 -8 -41 -25 -75 -37 -54 -19 -61 -19 -56 -5 10 26 43 72 91 126 46 53 77 104 68 114 -6 6 -95 -81 -143 -141 l-30 -38 -7 80 c-4 45 -5 89 -1 98 3 10 31 34 63 53 61 37 147 112 164 144 21 38 -53 8 -126 -52 -98 -80 -100 -81 -92 -46 12 47 54 133 81 166 14 16 25 42 25 56 l-1 27 -25 -30 -26 -30 6 53 c3 28 9 74 12 100 5 40 3 50 -10 55 -10 4 -22 -2 -32 -19z m-79 -654 c0 -125 0 -126 -33 -176 -22 -36 -56 -67 -109 -103 -42 -28 -82 -51 -90 -51 -20 0 -16 22 11 59 13 18 30 46 36 62 7 16 16 29 20 29 5 0 13 33 20 73 16 102 29 149 40 142 6 -4 10 -2 10 3 0 5 13 25 30 43 16 19 30 38 30 42 0 5 8 7 18 5 15 -3 17 -17 17 -128z M2287 5348 c-10 -10 -22 -16 -27 -13 -5 3 -8 -3 -8 -12 1 -10 -2 -37 -6 -59 -6 -32 -4 -43 7 -47 23 -9 67 61 67 105 0 44 -9 51 -33 26z M1853 5256 c4 -22 11 -42 17 -46 7 -4 14 -26 17 -49 3 -22 10 -41 15 -41 5 0 7 12 4 28 -3 15 -8 46 -11 69 -4 23 -16 49 -27 60 -21 18 -21 18 -15 -21z M1780 5267 c0 -47 15 -79 42 -93 l30 -16 -7 34 c-4 18 -12 44 -19 58 -12 28 -46 40 -46 17z M1960 5120 c0 -21 30 -70 49 -80 27 -14 31 -13 31 10 0 11 5 20 10 20 6 0 8 -11 4 -25 -6 -23 -4 -25 30 -25 20 0 36 4 36 8 0 18 -68 72 -109 87 -52 18 -51 18 -51 5z M4127 5076 c-4 -10 -7 -45 -7 -79 0 -42 -6 -70 -18 -88 -56 -85 -73 -107 -106 -138 -20 -19 -36 -39 -36 -43 0 -18 34 -6 62 23 29 28 34 30 84 24 41 -6 59 -3 83 11 37 22 44 37 28 59 -16 21 -72 22 -95 2 -21 -19 -32 -22 -32 -7 0 5 38 35 84 66 77 51 106 84 106 119 0 26 -43 16 -77 -17 l-33 -32 0 47 c0 34 -4 47 -14 47 -8 0 -16 5 -18 12 -3 7 -7 5 -11 -6z M1049 5043 c-8 -10 -9 -14 -2 -10 7 5 28 -18 57 -63 48 -74 62 -86 52 -45 -4 15 -2 25 4 25 15 0 -17 72 -41 93 -27 22 -53 22 -70 0z M3400 4964 c-14 -37 -12 -60 6 -75 14 -11 18 -10 30 6 19 26 18 81 -2 89 -23 9 -24 8 -34 -20z M3910 4933 c-29 -20 -40 -33 -40 -50 0 -33 63 6 75 45 8 26 -2 28 -35 5z M3401 4844 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z M4532 4829 c-8 -12 -9 -18 -3 -14 7 4 11 -8 12 -32 1 -21 4 -51 8 -68 6 -26 8 -22 13 29 5 39 3 67 -5 83 l-12 23 -13 -21z M1017 4820 c-8 -30 16 -52 65 -60 41 -6 45 -5 40 12 -5 20 -68 68 -88 68 -6 0 -14 -9 -17 -20z M2529 4778 c-11 -21 -7 -134 7 -185 8 -30 24 -19 24 17 0 16 7 35 15 44 18 17 20 70 4 115 -13 36 -33 40 -50 9z M830 4767 c0 -24 30 -116 40 -122 11 -7 1 92 -12 118 -10 20 -28 23 -28 4z M4660 4751 c0 -5 -9 -12 -19 -16 -23 -7 -101 -81 -101 -95 0 -26 50 -6 98 38 51 47 67 82 37 82 -8 0 -15 -4 -15 -9z M764 4719 c-7 -13 82 -106 92 -96 11 11 -9 43 -46 75 -27 23 -41 29 -46 21z M1887 4634 c-18 -18 -6 -91 21 -131 79 -118 125 -171 138 -159 10 9 8 18 -9 46 -12 19 -25 37 -29 38 -4 2 -8 25 -8 50 0 60 -15 115 -38 135 -20 19 -65 31 -75 21z M1030 4579 c0 -35 54 -169 68 -169 6 0 12 -8 12 -17 1 -17 2 -17 15 0 11 16 11 26 -5 71 -25 75 -47 114 -70 126 -17 9 -20 8 -20 -11z M697 4553 c19 -54 69 -92 112 -85 36 5 46 34 20 58 -11 9 -22 14 -25 11 -4 -4 -18 3 -32 13 -32 26 -84 28 -75 3z M1150 4486 c0 -36 52 -76 101 -76 47 0 57 29 12 32 -16 1 6 4 47 8 l75 6 -75 2 c-41 1 -85 8 -96 15 -12 6 -31 18 -43 25 -19 12 -21 11 -21 -12z M3909 4427 c-16 -27 -19 -51 -19 -149 0 -111 1 -118 20 -118 15 0 24 14 40 68 39 124 39 215 -1 225 -15 4 -25 -2 -40 -26z M4723 4375 c-30 -13 -33 -18 -33 -60 l0 -45 24 15 c27 18 49 48 60 83 9 26 -4 28 -51 7z M5002 4348 c-5 -7 -23 -40 -40 -73 -32 -65 -106 -146 -156 -172 -17 -9 -51 -21 -75 -28 -46 -11 -63 -28 -38 -38 7 -3 47 2 87 10 58 12 85 13 128 4 96 -19 162 -13 162 15 0 11 -19 14 -82 15 -46 0 -91 4 -101 8 -17 6 -17 8 2 25 11 10 44 25 73 32 34 8 43 13 27 13 -31 1 -44 24 -23 41 8 7 14 21 14 31 0 11 10 36 23 57 33 52 39 72 23 72 -7 0 -18 -6 -24 -12z M3632 4290 c-52 -37 -68 -69 -74 -145 -3 -33 -3 -54 0 -47 3 10 7 9 16 -4 12 -15 18 -14 79 15 69 33 101 66 95 98 -4 22 -37 30 -49 11 -6 -8 -7 10 -3 45 8 68 -2 72 -64 27z M5016 4271 c-11 -12 -16 -24 -12 -28 9 -9 39 22 34 37 -2 7 -10 4 -22 -9z M470 4264 c0 -9 8 -28 18 -42 10 -15 22 -33 27 -40 8 -15 -67 31 -102 62 -13 11 -23 14 -23 8 0 -7 -7 -12 -15 -12 -19 0 -19 -15 2 -50 20 -35 48 -48 118 -56 37 -5 55 -11 55 -20 0 -8 11 -14 25 -14 14 0 25 4 25 10 0 5 -22 43 -50 84 -49 73 -80 100 -80 70z M2382 4102 c-5 -9 -12 -42 -14 -72 -9 -96 18 -125 39 -43 17 66 17 120 -2 127 -8 3 -19 -2 -23 -12z M4235 3850 c36 -39 118 -80 162 -80 30 0 93 41 93 61 0 5 -14 15 -30 24 -25 13 -44 14 -107 6 -43 -5 -80 -6 -83 -1 -3 5 -19 12 -35 16 l-30 7 30 -33z M133 3667 c-19 -41 -15 -59 18 -86 30 -24 135 -55 151 -45 11 7 10 42 -2 49 -5 3 -10 11 -10 17 0 6 7 5 17 -3 12 -10 15 -10 9 -1 -13 22 -84 52 -125 52 -33 0 -40 4 -43 22 -3 21 -4 21 -15 -5z M5265 3631 c-16 -10 -43 -33 -60 -51 l-30 -32 83 4 c77 3 86 6 107 30 35 41 24 68 -29 68 -23 0 -54 -8 -71 -19z M400 3512 c0 -5 -53 -12 -117 -16 -64 -4 -120 -9 -125 -12 -16 -10 -8 -53 13 -65 51 -27 183 0 213 43 13 17 19 18 68 9 29 -5 66 -13 81 -16 22 -6 26 -4 21 9 -5 12 0 16 17 17 13 1 -3 7 -36 14 -106 22 -135 26 -135 17z M5090 3480 c0 -5 9 -10 20 -10 11 0 47 -13 80 -30 57 -29 121 -39 147 -22 22 14 19 45 -7 59 -30 15 -240 18 -240 3z M926 3272 c-12 -11 -6 -94 9 -122 16 -31 39 -47 86 -60 24 -7 29 -5 39 21 19 44 5 94 -34 124 -35 27 -90 47 -100 37z M500 3049 c0 -23 9 -62 20 -85 17 -33 30 -46 70 -62 34 -14 56 -32 70 -54 16 -28 109 -108 125 -108 3 0 5 7 5 15 0 12 7 14 28 9 15 -3 -8 11 -50 32 -42 20 -80 44 -83 53 -4 9 -9 46 -12 84 -5 61 -9 70 -41 98 -34 30 -59 43 -107 55 -24 6 -25 4 -25 -37z M5203 2779 c-18 -11 -35 -29 -38 -40 -7 -22 -20 -25 -32 -6 -8 13 -20 -26 -22 -74 -1 -30 25 -36 35 -7 4 15 9 17 20 7 8 -6 14 -18 14 -26 0 -11 7 -9 27 7 43 33 63 71 63 118 0 49 -14 53 -67 21z M5307 2622 c-34 -32 -86 -72 -115 -88 -51 -29 -61 -46 -29 -52 25 -5 198 81 229 114 15 16 30 41 33 57 7 25 5 27 -24 27 -25 0 -45 -13 -94 -58z M447 2652 c-10 -10 -15 -21 -12 -24 7 -7 75 24 75 34 0 15 -47 8 -63 -10z M263 2600 c-12 -5 -26 -18 -32 -28 -8 -15 -6 -24 13 -41 33 -31 84 -27 160 13 68 36 68 47 1 51 -16 1 -50 5 -75 8 -25 4 -55 3 -67 -3z M996 2540 c-37 -11 -102 -74 -115 -112 l-10 -28 58 0 c48 0 65 5 98 29 49 35 87 86 79 106 -6 17 -62 19 -110 5z M673 2324 c-43 -18 -42 -43 1 -88 33 -35 35 -36 114 -36 70 0 80 2 78 18 0 10 6 16 16 16 13 -1 9 8 -18 40 -19 22 -45 46 -57 53 -29 16 -94 15 -134 -3z M4790 2120 c-9 -17 -5 -20 43 -29 72 -15 166 -19 169 -9 2 5 11 6 21 3 20 -8 23 -35 5 -35 -7 -1 -2 -7 12 -15 29 -17 113 -20 141 -5 24 13 25 36 2 48 -10 5 -58 12 -108 15 -49 3 -117 12 -150 20 -110 28 -124 28 -135 7z M4881 2021 c6 -17 30 -50 53 -75 33 -36 49 -46 74 -46 25 0 32 4 32 19 0 25 -60 77 -99 86 -17 4 -36 15 -41 26 -17 30 -30 23 -19 -10z";
 
 // src/genre-tree/TreeMarkIcon.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function TreeMarkIcon({ className: className2 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { viewBox: "0 0 551 567", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { transform: "translate(0 567) scale(0.1 -0.1)", d: TREE_MARK_PATH }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { viewBox: "0 0 551 567", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { transform: "translate(0 567) scale(0.1 -0.1)", d: TREE_MARK_PATH }) });
 }
 
 // src/genre-tree/GenrePlayActions.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function PlayIcon({ kind }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { "aria-hidden": "true", className: "relative flex items-center justify-center w-5 h-5", children: [
-    kind === "tree" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
-    kind === "map" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
-    kind === "tree-map" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_50%_0_0)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_0_0_50%)]" })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { "aria-hidden": "true", className: "relative flex items-center justify-center w-5 h-5", children: [
+    kind === "tree" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
+    kind === "map" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
+    kind === "tree-map" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_50%_0_0)]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_0_0_50%)]" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react12.Play, { className: "relative w-5 h-5 fill-[var(--color-surface)]" })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react12.Play, { className: "relative w-5 h-5 fill-[var(--color-surface)]" })
   ] });
 }
 function playOptions(playlist) {
   if (!("genreOnlyTracksCount" in playlist)) return [{ key: "all", label: "Play", icon: "play", count: playlist.tracksCount }];
-  const direct = { key: "direct", label: "Genre", icon: "play", selection: { coverage: "genreOnly" }, count: (0, import_genre_tree10.genreMusicCount)(playlist, { coverage: "genreOnly" }) };
+  const direct = { key: "direct", label: "Genre", icon: "play", selection: { coverage: "genreOnly" }, count: (0, import_genre_tree11.genreMusicCount)(playlist, { coverage: "genreOnly" }) };
   const scopes = playlist.genreAndSubgenresTracksCount;
   const inclusive = (label, icon, subgenres) => {
     const selection = { coverage: "genreAndSubgenres", subgenres };
-    return { key: subgenres, label, icon, selection, count: (0, import_genre_tree10.genreMusicCount)(playlist, selection) };
+    return { key: subgenres, label, icon, selection, count: (0, import_genre_tree11.genreMusicCount)(playlist, selection) };
   };
   return "canonical" in scopes ? [direct, inclusive("Canonical", "tree", "canonical"), inclusive("Regional", "map", "regional"), inclusive("All", "tree-map", "all")] : [direct, inclusive("All", "map", "all")];
 }
 function GenrePlayActions({ genrePlaylist, playback }) {
   const { isPlaying, setIsPlaying } = (0, import_player4.usePlayer)();
   const options = playOptions(genrePlaylist);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: options.map((option) => {
-    const isCurrent = playback.playing?.uuid === genrePlaylist.uuid && (option.selection === void 0 || playback.playing.selectionKey === "" || playback.playing.selectionKey === (0, import_genre_tree10.genreMusicSelectionKey)(option.selection).join());
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: options.map((option) => {
+    const isCurrent = playback.playing?.uuid === genrePlaylist.uuid && (option.selection === void 0 || playback.playing.selectionKey === "" || playback.playing.selectionKey === (0, import_genre_tree11.genreMusicSelectionKey)(option.selection).join());
     const playing = isCurrent && isPlaying;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_ui10.ActionButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_ui11.ActionButton,
       {
-        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react12.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PlayIcon, { kind: option.icon }),
+        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react12.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PlayIcon, { kind: option.icon }),
         label: playing ? "Pause" : option.label,
         caption: String(option.count),
         disabled: option.count === 0,
@@ -1671,24 +1728,24 @@ function GenrePlayActions({ genrePlaylist, playback }) {
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
-var import_ui12 = require("@behindthemusictree/ui");
-var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui13 = require("@behindthemusictree/ui");
+var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/ClampedText.tsx
-var import_react12 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ClampedText({ children, className: className2 = "" }) {
-  const ref = (0, import_react12.useRef)(null);
-  const [expanded, setExpanded] = (0, import_react12.useState)(false);
-  const [overflows, setOverflows] = (0, import_react12.useState)(false);
-  (0, import_react12.useLayoutEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react13.useState)(false);
+  const [overflows, setOverflows] = (0, import_react13.useState)(false);
+  (0, import_react13.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element || expanded) return;
     setOverflows(element.scrollHeight > element.clientHeight);
   }, [children, expanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
-    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -1701,35 +1758,12 @@ function ClampedText({ children, className: className2 = "" }) {
   ] });
 }
 
-// src/genre-tree/CommonsPhoto.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
-}
-function CommonsPhoto({
-  image,
-  alt,
-  creditLabel = "Photo"
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("figure", { className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: image.url, alt, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("figcaption", { className: "text-caption text-[var(--color-text-muted)]", children: [
-      creditLabel,
-      ": ",
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
-      ",",
-      " ",
-      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
-    ] })
-  ] });
-}
-
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_zod = require("zod");
 var import_fa4 = require("react-icons/fa");
-var import_ui11 = require("@behindthemusictree/ui");
+var import_ui12 = require("@behindthemusictree/ui");
 var import_auth2 = require("@behindthemusictree/app-kit/auth");
 var import_transport4 = require("@behindthemusictree/app-kit/transport");
 var import_transport5 = require("@behindthemusictree/app-kit/transport");
@@ -1738,23 +1772,23 @@ var import_player5 = require("@behindthemusictree/app-kit/player");
 var import_player6 = require("@behindthemusictree/app-kit/player");
 var import_popup4 = require("@behindthemusictree/app-kit/popup");
 var import_transport7 = require("@behindthemusictree/app-kit/transport");
-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_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/MusicBrainzRecordingLink.tsx
-var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function MusicBrainzRecordingLink({
   song,
   children,
   className: className2 = ""
 }) {
-  const url = (0, import_genre_tree11.musicBrainzRecordingUrl)(song);
-  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const url = (0, import_genre_tree12.musicBrainzRecordingUrl)(song);
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "a",
     {
       href: url,
@@ -1769,11 +1803,11 @@ function MusicBrainzRecordingLink({
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun2 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = (0, import_transport5.PaginatedResponseSchema)(import_genre_tree15.SongDetailedSchema).extend({
+var SongPageSchema = (0, import_transport5.PaginatedResponseSchema)(import_genre_tree16.SongDetailedSchema).extend({
   overallTotal: import_zod.z.number().nullable(),
   page: import_zod.z.number().nullable(),
   totalPages: import_zod.z.number().nullable()
@@ -1802,7 +1836,7 @@ function GenrePlaylistTracks({
   renderTracksToolbar,
   artist = null
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist, playNewTrackListFromGenreCatalogue } = (0, import_genre_tree16.useTrackList)();
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist, playNewTrackListFromGenreCatalogue } = (0, import_genre_tree17.useTrackList)();
   const { session, sessionRestored } = (0, import_auth2.useSession)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player5.usePlayer)();
   const { showPopup } = (0, import_popup4.usePopup)();
@@ -1812,18 +1846,18 @@ function GenrePlaylistTracks({
   const { fetchBound } = (0, import_transport4.usePlaybackFetch)(getBackendBaseUrl);
   const playback = (0, import_transport4.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
-    queryKey: [...scope === "me" ? uuid ? import_genre_tree13.genrePlaylistQueryKeys.me.tracks(uuid) : ["missing-personal-genre-playlist", genreUuid] : artist ? [...import_genre_tree14.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree14.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
+    queryKey: [...scope === "me" ? uuid ? import_genre_tree14.genrePlaylistQueryKeys.me.tracks(uuid) : ["missing-personal-genre-playlist", genreUuid] : artist ? [...import_genre_tree15.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree15.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
       if (scope === "me") {
         if (!uuid) throw new Error("Personal genre has no playlist");
         return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       }
       const response = await fetchBound(
-        import_genre_tree14.libraryEndpoints.reference.songs.list(),
+        import_genre_tree15.libraryEndpoints.reference.songs.list(),
         true,
         false,
         {},
-        { genre: genreUuid, ...(0, import_genre_tree12.genreMusicQueryParams)(selection), ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+        { genre: genreUuid, ...(0, import_genre_tree13.genreMusicQueryParams)(selection), ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
       );
       const parsed = (0, import_transport6.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
       return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
@@ -1834,8 +1868,8 @@ function GenrePlaylistTracks({
     retry: (failureCount, error) => failureCount < 1 && error instanceof DOMException && error.name === "AbortError",
     retryDelay: 0
   });
-  const [sentinel, setSentinel] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const [sentinel, setSentinel] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
       if (entries.some((entry) => entry.isIntersecting)) {
@@ -1857,36 +1891,36 @@ function GenrePlaylistTracks({
     }) : scope === "reference" ? playNewTrackListFromGenreCatalogue({ uuid: genreUuid, name: genreName }, scope, { startSongUuid, ...selection && { selection } }) : genrePlaylist ? playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid }) : Promise.reject(new Error("Personal genre has no playlist"));
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
-      if (error instanceof import_genre_tree16.TracksFailureAlreadyReportedError) return;
-      showPopup(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InternalErrorPopup, { errorCode: error instanceof import_transport7.AppError ? error.code : import_transport7.ErrorCode.CLIENT_UNKNOWN }));
+      if (error instanceof import_genre_tree17.TracksFailureAlreadyReportedError) return;
+      showPopup(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(InternalErrorPopup, { errorCode: error instanceof import_transport7.AppError ? error.code : import_transport7.ErrorCode.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui11.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
     renderTracksToolbar?.(),
-    scope === "me" && !genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { children: "\u2014" }) : isPending ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui11.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { role: "alert", children: [
+    scope === "me" && !genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: "\u2014" }) : isPending ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { role: "alert", children: [
       "Couldn't load ",
       trackNoun.plural,
       ".",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-body [container-type:inline-size]", "aria-label": `${genreName} ${trackNoun.plural}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-body [container-type:inline-size]", "aria-label": `${genreName} ${trackNoun.plural}`, children: [
       tracks.map((track, index) => {
         const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
         const isCurrent = playerTrackObject?.track.id === track.uuid;
         const isPlaying = isCurrent && playState === import_player6.PlayStates.PLAYING;
-        const text = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree15.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
-          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_genre_tree17.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
-          track.album && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
+        const text = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: TEXT_CELL, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree16.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_genre_tree18.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
         ] });
         const leading = renderSongLeading?.(track, index);
         const actions = renderSongActions?.(track);
-        const isUnplayable = (0, import_genre_tree15.isSong)(track) && (0, import_genre_tree15.songUnplayableReason)(track) !== null;
+        const isUnplayable = (0, import_genre_tree16.isSong)(track) && (0, import_genre_tree16.songUnplayableReason)(track) !== null;
         if (isUnplayable) {
-          return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
             leading,
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "button",
               {
                 type: "button",
@@ -1894,27 +1928,27 @@ function GenrePlaylistTracks({
                 "aria-disabled": "true",
                 "aria-label": label,
                 className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fa4.FaPlay, { size: 10 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fa4.FaPlay, { size: 10 })
               }
             ),
             text,
             actions
           ] }, track.uuid);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "li",
           {
             className: `group flex min-h-8 items-center gap-1 rounded px-1 hover:bg-[var(--color-neutral-100)] ${isCurrent ? "font-medium text-[var(--color-primary)]" : ""}`,
             children: [
               leading,
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
                   className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== import_player6.PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
                   onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
-                  children: isCurrent && playState === import_player6.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui11.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fa4.FaPlay, { size: 10 })
+                  children: isCurrent && playState === import_player6.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fa4.FaPlay, { size: 10 })
                 }
               ),
               text,
@@ -1924,7 +1958,7 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
   ] }) });
 }
@@ -1932,8 +1966,9 @@ function GenrePlaylistTracks({
 // src/genre-tree/GenreDetailExtras.tsx
 var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
 var import_si2 = require("react-icons/si");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function GenreDetailExtras({
+  imageInCover = false,
   genreUuid,
   genrePlaylist,
   genreName,
@@ -1951,25 +1986,25 @@ function GenreDetailExtras({
   ...trackSlots
 }) {
   const trackNoun = (0, import_track_noun3.useTrackNoun)();
-  const { data: overview, isPending } = (0, import_genre_tree18.useFetchGenreOverview)(
+  const { data: overview, isPending } = (0, import_genre_tree19.useFetchGenreOverview)(
     genreUuid,
     scope,
     getBackendBaseUrl,
     criteriaOverviewSchema
   );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-4 w-3/4" }) }) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
-  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: family });
+  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: family });
   const { summary, summarySourceUrl, essentialSongs, image } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    image && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CommonsPhoto, { image, alt: overview.name, creditLabel: "Image" }),
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-caption text-[var(--color-text)]", children: [
-      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    image && (imageInCover ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CommonsPhotoCredit, { image, creditLabel: "Image" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CommonsPhoto, { image, alt: overview.name, creditLabel: "Image" })),
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-caption text-[var(--color-text)]", children: [
+      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "a",
         {
           href: summarySourceUrl,
@@ -1977,12 +2012,12 @@ function GenreDetailExtras({
           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_runtime35.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikipedia"
           ]
         }
       ),
-      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "a",
         {
           href: wikidataUrl,
@@ -1990,17 +2025,17 @@ function GenreDetailExtras({
           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_runtime35.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikidata"
           ]
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ClampedText, { className: "text-body text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ClampedText, { className: "text-body text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "text-body text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-body text-[var(--color-text)]", children: "\u2014" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "text-body text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-body text-[var(--color-text)]", children: "\u2014" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       GenrePlaylistTracks,
       {
         genreUuid,
@@ -2018,10 +2053,10 @@ function GenreDetailExtras({
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var import_react14 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react15 = require("react");
 function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenreActionBand, { ...bandProps, playActions: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenrePlayActions, { genrePlaylist, playback }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GenreActionBand, { ...bandProps, playActions: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GenrePlayActions, { genrePlaylist, playback }) });
 }
 function GenreInfoPanelBody({
   toolbar,
@@ -2036,12 +2071,12 @@ function GenreInfoPanelBody({
   band,
   extras
 }) {
-  const summary = scope === "reference" ? import_genre_tree19.GenreCatalogueCountsSchema.parse(genrePlaylist ?? catalogue) : void 0;
-  const selection = summary ? (0, import_genre_tree19.defaultGenreMusicSelection)(summary) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+  const summary = scope === "reference" ? import_genre_tree20.GenreCatalogueCountsSchema.parse(genrePlaylist ?? catalogue) : void 0;
+  const selection = summary ? (0, import_genre_tree20.defaultGenreMusicSelection)(summary) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
     toolbar,
-    genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenreActionBand, { ...band }),
-    /* @__PURE__ */ (0, import_react14.createElement)(
+    genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GenreActionBand, { ...band }),
+    /* @__PURE__ */ (0, import_react15.createElement)(
       GenreDetailExtras,
       {
         ...extras,
@@ -2060,7 +2095,7 @@ function GenreInfoPanelBody({
 }
 
 // src/genre-tree/GenreDetailPanel.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
   return {
@@ -2085,11 +2120,11 @@ function useGenreDetailContent({
   expanded,
   treeStyles
 }) {
-  const result = (0, import_genre_tree20.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
+  const result = (0, import_genre_tree21.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
   const detail = result.status === "success" ? result.genre : void 0;
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: [], artist: extras?.artist });
   const playback = hostPlayback ?? defaultPlayback;
-  const view = (0, import_react15.useMemo)(() => {
+  const view = (0, import_react16.useMemo)(() => {
     if (!detail) return null;
     const rootColor = (0, import_genre_tree_view4.getGenreTreeColor)(detail.root.wikidataId);
     const relative = (genre, parentId) => ({
@@ -2103,7 +2138,7 @@ function useGenreDetailContent({
         id: detail.uuid,
         parentId: detail.parent?.uuid ?? null,
         name: detail.name,
-        itemCount: scope === "reference" ? (0, import_genre_tree20.genreMusicCount)(detail.criteriaPlaylist ? import_genre_tree20.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : import_genre_tree20.GenreCatalogueCountsSchema.parse(detail.catalogue)) : detail.tracksCount,
+        itemCount: scope === "reference" ? (0, import_genre_tree21.genreMusicCount)(detail.criteriaPlaylist ? import_genre_tree21.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : import_genre_tree21.GenreCatalogueCountsSchema.parse(detail.catalogue)) : detail.tracksCount,
         wikidataId: detail.wikidataId
       },
       fill: own.fill,
@@ -2118,24 +2153,24 @@ function useGenreDetailContent({
   if (result.status === "not-found") return {
     name: null,
     title: "Genre not found",
-    content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "This genre does not exist." })
+    content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "This genre does not exist." })
   };
   if (result.status === "error") return {
     name: null,
     title: "Genre unavailable",
-    content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { role: "alert", className: "text-body text-[var(--color-text)]", children: "This genre could not be loaded." })
+    content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "text-body text-[var(--color-text)]", children: "This genre could not be loaded." })
   };
   if (!detail || !view) return {
     name: null,
     title: "Loading genre\u2026",
-    content: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-3", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui13.Skeleton, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui13.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui13.Skeleton, { className: "h-4 w-3/4" })
+    content: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-3", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.Skeleton, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.Skeleton, { className: "h-4 w-3/4" })
     ] })
   };
-  const selectGenre = (nodeId) => onSelectGenre(import_genre_tree20.GenreUuidSchema.parse(nodeId));
-  const family = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const selectGenre = (nodeId) => onSelectGenre(import_genre_tree21.GenreUuidSchema.parse(nodeId));
+  const family = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     import_genre_tree_view4.GenreNodeFamily,
     {
       node: view.node,
@@ -2146,29 +2181,38 @@ function useGenreDetailContent({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_genre_tree_view4.GenreNodeAncestors,
+    {
+      node: view.node,
+      fill: view.fill,
+      textColor: view.textColor,
+      ancestorNodes: view.ancestorNodes,
+      onSelectNode: selectGenre
+    }
+  );
   return {
     name: detail.name,
     title: detail.name,
     headerAccent: { background: view.fill, color: view.textColor },
     aside: expanded ? ancestors : void 0,
-    content: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    content: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         GenreInfoPanelBody,
         {
-          family: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          family: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
             family,
             !expanded && ancestors
           ] }),
           genreUuid: detail.uuid,
-          genrePlaylist: hostPlaylist ?? (detail.criteriaPlaylist === null ? null : scope === "reference" ? { ...import_genre_tree20.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist), criteria: import_genre_tree20.CriteriaMinimumSchema.parse(detail) } : { ...detail.criteriaPlaylist, criteria: import_genre_tree20.CriteriaMinimumSchema.parse(detail), tracksCount: detail.tracksCount }),
+          genrePlaylist: hostPlaylist ?? (detail.criteriaPlaylist === null ? null : scope === "reference" ? { ...import_genre_tree21.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist), criteria: import_genre_tree21.CriteriaMinimumSchema.parse(detail) } : { ...detail.criteriaPlaylist, criteria: import_genre_tree21.CriteriaMinimumSchema.parse(detail), tracksCount: detail.tracksCount }),
           catalogue: detail.catalogue,
           wikidataId: detail.wikidataId,
           scope,
           getBackendBaseUrl,
           playback,
           band: { node: view.node, ...band, shareTarget: band?.shareTarget?.kind === "genre" ? { ...band.shareTarget, name: detail.name } : band?.shareTarget },
-          extras
+          extras: { ...extras, imageInCover: true }
         }
       ),
       trailing
@@ -2200,9 +2244,13 @@ function GenreDetailPanel({
     expanded,
     band: { onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_ui13.DetailPanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    GenreOverviewDetailPanel,
     {
+      genreUuid: panel.name ? import_genre_tree21.GenreUuidSchema.parse(genreUuid) : null,
+      scope,
+      getBackendBaseUrl,
+      criteriaOverviewSchema: extras?.criteriaOverviewSchema,
       side: "left",
       title: panel.title,
       headerAccent: panel.headerAccent,
@@ -2213,16 +2261,17 @@ function GenreDetailPanel({
       edgeTab,
       aside: panel.aside,
       titleInSearch,
-      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui13.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react13.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react13.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
+      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react13.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react13.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
       children: panel.content
     }
   );
 }
 
 // src/genre-tree/ChangeParentPopup.tsx
-var import_react16 = require("react");
-var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui15 = require("@behindthemusictree/ui");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -2231,38 +2280,52 @@ function ChangeParentPopup({
   onClose,
   onParentChanged
 }) {
-  const { mutate, isPending, formErrors } = (0, import_genre_tree21.useUpdateGenre)(scope, getBackendBaseUrl);
-  const candidates = (0, import_react16.useMemo)(
-    () => (0, import_genre_tree21.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
+  const { mutate, isPending, formErrors } = (0, import_genre_tree22.useUpdateGenre)(scope, getBackendBaseUrl);
+  const candidates = (0, import_react17.useMemo)(
+    () => (0, import_genre_tree22.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
-  const handleSelect = (newParent) => {
+  const [confirmingRoot, setConfirmingRoot] = (0, import_react17.useState)(false);
+  const handleMove = (to) => {
     const genre = genrePlaylist.criteria.uuid;
     const parentPlaylistUuid = genrePlaylist.parent?.uuid;
     const from = parentPlaylistUuid ? genrePlaylists.find(({ uuid }) => uuid === parentPlaylistUuid)?.criteria?.uuid ?? null : null;
     mutate(
-      { uuid: genre, data: { parent: newParent.criteria.uuid } },
+      { uuid: genre, data: { parent: to } },
       {
         onSuccess: () => {
           onClose();
-          onParentChanged?.({ genre, from, to: newParent.criteria.uuid });
+          onParentChanged?.({ genre, from, to });
         }
       }
     );
   };
-  (0, import_react16.useEffect)(() => {
+  const handleSelect = (newParent) => handleMove(newParent.criteria.uuid);
+  (0, import_react17.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: "mb-3 text-body text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "mb-3 text-body text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    genrePlaylist.parent && (confirmingRoot ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "mb-3 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "mb-2", children: [
+        genrePlaylist.name,
+        " and its descendants will no longer be under ",
+        genrePlaylist.parent.name,
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(PopupButtons, { alignment: "left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui15.Button, { disabled: isPending, onClick: () => handleMove(null), children: "Confirm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui15.Button, { variant: "secondary", disabled: isPending, onClick: () => setConfirmingRoot(false), children: "Back" })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui15.Button, { variant: "secondary", onClick: () => setConfirmingRoot(true), children: "Make root" }) })),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -2270,25 +2333,25 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "mt-3 text-body text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { role: "alert", className: "mt-3 text-body text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_ui20 = require("@behindthemusictree/ui");
-var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui22 = require("@behindthemusictree/ui");
+var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistActionBand.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_ui14 = require("@behindthemusictree/ui");
-var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui16 = require("@behindthemusictree/ui");
+var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player7 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ArtistActionBand({ artist, share }) {
-  const { trackList, playNewTrackListFromArtist } = (0, import_genre_tree22.useTrackList)();
+  const { trackList, playNewTrackListFromArtist } = (0, import_genre_tree23.useTrackList)();
   const { isPlaying, setIsPlaying } = (0, import_player7.usePlayer)();
   const origin = trackList?.origin;
-  const isCurrent = origin?.type === import_genre_tree22.TrackListOriginType.ARTIST && origin.uuid === artist.uuid;
+  const isCurrent = origin?.type === import_genre_tree23.TrackListOriginType.ARTIST && origin.uuid === artist.uuid;
   const playing = isCurrent && isPlaying;
   const handleClick = () => {
     if (isCurrent) {
@@ -2299,11 +2362,11 @@ function ArtistActionBand({ artist, share }) {
       console.error("Failed to load artist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui14.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_ui14.ActionBand, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_ui14.ActionButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui16.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_ui16.ActionBand, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_ui16.ActionButton,
       {
-        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
         label: playing ? "Pause" : "Play",
         caption: String(artist.playableTracksCount),
         disabled: artist.playableTracksCount === 0,
@@ -2316,13 +2379,13 @@ function ArtistActionBand({ artist, share }) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_ui16 = require("@behindthemusictree/ui");
+var import_ui18 = require("@behindthemusictree/ui");
 
 // src/genre-tree/artist/ArtistLinks.tsx
 var import_lucide_react15 = require("lucide-react");
 var import_si3 = require("react-icons/si");
-var import_ui15 = require("@behindthemusictree/ui");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_ui17 = require("@behindthemusictree/ui");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var LINK_KINDS = {
   official: { label: "Official website", Icon: import_lucide_react15.Globe },
   wikipedia: { label: "Wikipedia", Icon: import_si3.SiWikipedia },
@@ -2359,7 +2422,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui17.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -2370,7 +2433,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function originLabel(artist, origin) {
   if (origin.source === "area") return "From";
@@ -2384,7 +2447,7 @@ function OriginValue({
   renderPlaceLink
 }) {
   const place = renderPlaceLink && origin.regionId !== null ? renderPlaceLink({ ...origin, regionId: origin.regionId }) : origin.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
     place,
     country && origin.kind !== "country" && `, ${country}`
   ] });
@@ -2399,30 +2462,24 @@ function ArtistHeader({
   if (artist.origin) {
     fields.push({
       label: originLabel(artist, artist.origin),
-      value: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OriginValue, { origin: artist.origin, country, renderPlaceLink })
+      value: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OriginValue, { origin: artist.origin, country, renderPlaceLink })
     });
   }
   if (country && !artist.origin) fields.push({ label: "Country", value: country });
   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_runtime41.jsx)(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.FieldList, { items: fields });
-}
-
-// src/genre-tree/artist/ArtistPhoto.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function ArtistPhoto({ image, name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommonsPhoto, { image, alt: name });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-var import_ui17 = require("@behindthemusictree/ui");
+var import_ui19 = require("@behindthemusictree/ui");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui17.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui19.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -2443,7 +2500,7 @@ 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_runtime43.jsxs)(import_ui17.PanelSection, { title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_ui19.PanelSection, { title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       MembershipList,
@@ -2457,7 +2514,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-var import_ui18 = require("@behindthemusictree/ui");
+var import_ui20 = require("@behindthemusictree/ui");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
@@ -2478,10 +2535,10 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui18.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui20.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_runtime44.jsx)(import_ui18.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui20.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
@@ -2489,16 +2546,16 @@ function ArtistDiscography({ albums }) {
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
-var import_ui19 = require("@behindthemusictree/ui");
+var import_ui21 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport8 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_player10 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/TrackPositionPlayPause.tsx
 var import_fa5 = require("react-icons/fa");
@@ -2553,8 +2610,8 @@ function TrackPositionPlayPause({
 }
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
-var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function TrackItem({
   track,
@@ -2565,11 +2622,11 @@ function TrackItem({
   renderSongLink
 }) {
   const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player10.usePlayer)();
-  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree23.useTrackList)();
+  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree24.useTrackList)();
   const scope = trackList?.origin?.scope ?? null;
   const isCurrentTrack = playerTrackObject?.track.id === track.uuid;
   const hasPlaybackError = isCurrentTrack && !!playerTrackObject?.loadError;
-  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree24.isSong)(track) && (0, import_genre_tree24.songUnplayableReason)(track) !== null;
+  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree25.isSong)(track) && (0, import_genre_tree25.songUnplayableReason)(track) !== null;
   const handlePlayPauseClick = (event) => {
     event.stopPropagation();
     if (isCurrentTrack) {
@@ -2602,8 +2659,8 @@ function TrackItem({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree24.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_genre_tree25.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree25.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_genre_tree26.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-caption font-bold", children: track.genre.name }) : "" }),
         renderDuration && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -2622,20 +2679,20 @@ function TrackItem({
 
 // src/genre-tree/artist/ArtistSongs.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport8.PaginatedResponseSchema)(import_genre_tree26.SongDetailedSchema);
+var SongPageSchema2 = (0, import_transport8.PaginatedResponseSchema)(import_genre_tree27.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
-  const [page, setPage] = (0, import_react17.useState)(1);
-  const [ordering, setOrdering] = (0, import_react17.useState)("title");
-  const { playNewTrackListFromArtist } = (0, import_genre_tree26.useTrackList)();
+  const [page, setPage] = (0, import_react18.useState)(1);
+  const [ordering, setOrdering] = (0, import_react18.useState)("title");
+  const { playNewTrackListFromArtist } = (0, import_genre_tree27.useTrackList)();
   const { playerTrackObject } = (0, import_player11.usePlayer)();
   const { data, isPending, isError } = (0, import_transport8.usePlaybackQuery)({
     getBackendBaseUrl,
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
-    queryFn: (fetchBound) => fetchBound(import_genre_tree26.libraryEndpoints.reference.songs.list(), true, false, void 0, {
+    queryFn: (fetchBound) => fetchBound(import_genre_tree27.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
       ordering,
       page
@@ -2650,11 +2707,11 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   });
   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_tree26.songUnplayableReason)(song) !== null) return;
+    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree27.songUnplayableReason)(song) !== null) return;
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui19.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui19.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "button",
       {
@@ -2678,7 +2735,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui19.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
@@ -2696,7 +2753,7 @@ function useArtistPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree27.useArtist)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree28.useArtist)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2706,12 +2763,12 @@ function useArtistPanel({
         ...panel,
         title: "Artist",
         content: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-16" })
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
@@ -2733,6 +2790,7 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
+        cover: artist.image ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CommonsCover, { image: artist.image, alt: artist.name }) : void 0,
         content: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             ArtistActionBand,
@@ -2741,7 +2799,7 @@ function useArtistPanel({
               share: shareTarget && shareUrl ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) : void 0
             }
           ),
-          artist.image && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
+          artist.image && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CommonsPhotoCredit, { image: artist.image }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistHeader, { artist, renderPlaceLink }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
@@ -2762,24 +2820,24 @@ function useArtistPanel({
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_ui22 = require("@behindthemusictree/ui");
-var import_genre_tree29 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui24 = require("@behindthemusictree/ui");
+var import_genre_tree30 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_lucide_react16 = require("lucide-react");
-var import_ui21 = require("@behindthemusictree/ui");
+var import_ui23 = require("@behindthemusictree/ui");
 var import_player12 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree29 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var numberFormat = new Intl.NumberFormat("en");
 var dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
 var externalLink = "text-[var(--color-primary)] hover:underline focus-visible:underline";
 function SongHistory({ uuid, getBackendBaseUrl }) {
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const history = (0, import_genre_tree28.useSongHistory)(uuid, getBackendBaseUrl, open);
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const history = (0, import_genre_tree29.useSongHistory)(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.Skeleton, { className: "h-10", "aria-busy": "true" });
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui23.Skeleton, { className: "h-10", "aria-busy": "true" });
   else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
     body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { className: "py-1.5 text-body", children: [
@@ -2797,20 +2855,20 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui21.PANEL_LABEL_CLASS}`, children: "History" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui23.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui23.PANEL_LABEL_CLASS}`, children: "History" }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mt-1.5", children: body })
   ] }) });
 }
 function SongPanelContent(props) {
   const { song, scope, getBackendBaseUrl, shareUrl, renderArtistLink } = props;
-  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree28.useTrackList)();
+  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree29.useTrackList)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player12.usePlayer)();
-  const unplayableReason = (0, import_genre_tree28.songUnplayableReason)(song);
+  const unplayableReason = (0, import_genre_tree29.songUnplayableReason)(song);
   const isCurrent = playerTrackObject?.track.id === song.uuid;
   const isPlaying = isCurrent && playState === import_player12.PlayStates.PLAYING;
   const shareTarget = { kind: "song", uuid: song.uuid, name: song.title, scope };
-  const musicBrainzUrl = (0, import_genre_tree28.musicBrainzRecordingUrl)(song);
+  const musicBrainzUrl = (0, import_genre_tree29.musicBrainzRecordingUrl)(song);
   const fields = [];
   if (song.genre) {
     const path = props.genrePath && props.genrePath.length > 0 ? props.genrePath : null;
@@ -2856,9 +2914,9 @@ function SongPanelContent(props) {
       value: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex gap-3", children: links })
     });
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_ui21.ActionBand, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui23.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_ui23.ActionBand, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        import_ui21.ActionButton,
+        import_ui23.ActionButton,
         {
           icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react16.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react16.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
           label: isPlaying ? "Pause" : "Play",
@@ -2869,9 +2927,9 @@ function SongPanelContent(props) {
       ),
       shareUrl && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_genre_tree28.ArtistNames, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.FieldList, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_genre_tree29.ArtistNames, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui23.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui23.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
@@ -2889,7 +2947,7 @@ function useSongPanel({
   onClose,
   ...navigation
 }) {
-  const result = (0, import_genre_tree29.useSong)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree30.useSong)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2899,10 +2957,10 @@ function useSongPanel({
         ...panel,
         title: "Song",
         content: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-4 w-24" })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui24.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui24.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui24.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui24.Skeleton, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
@@ -2977,14 +3035,14 @@ function useEntityPanel({
 
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md2 = require("react-icons/md");
-var import_ui23 = require("@behindthemusictree/ui");
+var import_ui25 = require("@behindthemusictree/ui");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_ui23.SegmentedControl,
+    import_ui25.SegmentedControl,
     {
       variant: "floating",
       "aria-label": "Size nodes by",
@@ -3025,6 +3083,8 @@ function GenreTreeView({
   criteriaOverviewSchema,
   renderGenreDetailExtras,
   floatingControlsLeading,
+  searchTrailingAction,
+  searchFullWidthBreakpoint = "md",
   sizeMetric: controlledSizeMetric,
   onSizeMetricChange,
   renderArtistLink,
@@ -3062,21 +3122,21 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const getShareUrlRef = (0, import_react19.useRef)(getShareUrl);
+  const getShareUrlRef = (0, import_react20.useRef)(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react19.useState)(null);
+  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react20.useState)(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSongUuid, setInternalSongUuid] = (0, import_react19.useState)(null);
+  const [internalSongUuid, setInternalSongUuid] = (0, import_react20.useState)(null);
   const isSongControlled = controlledSongUuid !== void 0;
   const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
   const changeSong = (uuid) => {
     if (!isSongControlled) setInternalSongUuid(uuid);
     onSongUuidChange?.(uuid);
   };
-  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react19.useState)("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react20.useState)("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
-  const deferredSizeMetric = (0, import_react19.useDeferredValue)(sizeMetric);
+  const deferredSizeMetric = (0, import_react20.useDeferredValue)(sizeMetric);
   const changeSizeMetric = (metric) => {
     if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
     onSizeMetricChange?.(metric);
@@ -3108,7 +3168,7 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree31.useGenreTreeViewState)({
+  } = (0, import_genre_tree32.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
@@ -3118,7 +3178,7 @@ function GenreTreeView({
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react19.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react20.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -3127,14 +3187,14 @@ function GenreTreeView({
     restoreRootUuid = selectedGenrePlaylist.root.uuid;
     setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
   }
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree31.genreUpdateMutationKey }) > 0;
-  const { mutate: updateGenre } = (0, import_genre_tree31.useUpdateGenre)(scope, getBackendBaseUrl);
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree32.genreUpdateMutationKey }) > 0;
+  const { mutate: updateGenre } = (0, import_genre_tree32.useUpdateGenre)(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
   const isArtistFiltered = artistUuid !== null;
   const canSizeByViews = !isArtistFiltered && hasViewsCount(visibleGenrePlaylists);
-  const artistResult = (0, import_genre_tree31.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const artistResult = (0, import_genre_tree32.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
-  const filterArtist = (0, import_react19.useMemo)(
+  const filterArtist = (0, import_react20.useMemo)(
     () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
     [artistUuid, filterArtistName]
   );
@@ -3149,14 +3209,14 @@ function GenreTreeView({
     if (selectedGenreUuid !== null) clearSelection();
     changeSong(uuid);
   };
-  const openSongRef = (0, import_react19.useRef)(openSong);
+  const openSongRef = (0, import_react20.useRef)(openSong);
   openSongRef.current = openSong;
-  const resolvedRenderSongLink = (0, import_react19.useCallback)(
+  const resolvedRenderSongLink = (0, import_react20.useCallback)(
     (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
-  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react19.useState)(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react19.useState)(null);
+  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react20.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react20.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
   const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
@@ -3203,8 +3263,8 @@ function GenreTreeView({
     }
   });
   const otherPanel = overlayPanel ?? (selectedGenreUuid !== null ? void 0 : entityPanel);
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react19.useState)(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react19.useState)(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react20.useState)(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react20.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -3215,30 +3275,30 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setUncontrolledCollapsed(false);
   }, [selectedGenreUuid, artistUuid, songUuid]);
-  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react19.useState)(false);
+  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react20.useState)(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && !isError && (!usesHandoff || isWheelRevealed);
-  const [resolveStyle, setResolveStyle] = (0, import_react19.useState)(null);
-  const handleNodeStyleResolverChange = (0, import_react19.useCallback)(
+  const [resolveStyle, setResolveStyle] = (0, import_react20.useState)(null);
+  const handleNodeStyleResolverChange = (0, import_react20.useCallback)(
     (resolver) => setResolveStyle(() => resolver),
     []
   );
-  const panelRef = (0, import_react19.useRef)(null);
-  const obscuredInset = (0, import_ui24.useObscuredInset)(panelRef);
+  const panelRef = (0, import_react20.useRef)(null);
+  const obscuredInset = (0, import_ui26.useObscuredInset)(panelRef);
   const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
   const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
-  const treeNodes = (0, import_react19.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric, focusUuids), [visibleGenrePlaylists, nodeMetric, focusUuids]);
+  const treeNodes = (0, import_react20.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric, focusUuids), [visibleGenrePlaylists, nodeMetric, focusUuids]);
   const relations = (0, import_genre_tree_view5.useGenreNodeRelations)(
     treeNodes,
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
-  const treeStyles = (0, import_react19.useMemo)(() => toGenreNodeStyles(relations, visibleGenrePlaylists), [relations, visibleGenrePlaylists]);
-  const validSelectedGenreUuid = (0, import_genre_tree30.toGenreUuid)(selectedGenreUuid);
-  const [selectionHistory, setSelectionHistory] = (0, import_react19.useState)({ current: validSelectedGenreUuid, previous: null });
+  const treeStyles = (0, import_react20.useMemo)(() => toGenreNodeStyles(relations, visibleGenrePlaylists), [relations, visibleGenrePlaylists]);
+  const validSelectedGenreUuid = (0, import_genre_tree31.toGenreUuid)(selectedGenreUuid);
+  const [selectionHistory, setSelectionHistory] = (0, import_react20.useState)({ current: validSelectedGenreUuid, previous: null });
   if (selectionHistory.current !== validSelectedGenreUuid) {
     setSelectionHistory({ current: validSelectedGenreUuid, previous: selectionHistory.current ?? selectionHistory.previous });
   }
@@ -3264,7 +3324,7 @@ function GenreTreeView({
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = (0, import_react19.useRef)(void 0);
+  const zoomInRef = (0, import_react20.useRef)(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
   const genrePlaylist = selectedGenrePlaylist;
   const criteria = genrePlaylist?.criteria;
@@ -3332,6 +3392,7 @@ function GenreTreeView({
     activePanel = {
       title: otherPanel.title,
       content: otherPanel.content,
+      cover: otherPanel.cover,
       aside: otherPanel.extraContent,
       expanded: otherPanel.expanded ?? false,
       onExpandedChange: otherPanel.onExpandedChange,
@@ -3356,7 +3417,7 @@ function GenreTreeView({
     center: activePanel.expanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : activePanel.onExpandedChange ? { label: "Extend panel", onClick: () => activePanel.onExpandedChange?.(true) } : null
   } : void 0;
   const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_ui24.IconButton,
+    import_ui26.IconButton,
     {
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
@@ -3422,13 +3483,16 @@ function GenreTreeView({
         onPrevious: handlePrevious,
         onQueryChange: onSearchQueryChange,
         onFocus: onSearchFocus,
+        trailingAction: searchTrailingAction,
+        trailingActionBreakpoint: "md",
+        fullWidthBreakpoint: searchFullWidthBreakpoint,
         extraGroups: extraSearchGroups
       }
     ),
     !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
     /* @__PURE__ */ (0, import_jsx_runtime52.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 && !isError && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-        import_ui24.SegmentedControl,
+        import_ui26.SegmentedControl,
         {
           "aria-label": "Tree view mode",
           value: viewMode,
@@ -3448,7 +3512,7 @@ function GenreTreeView({
           role: "group",
           "aria-label": "Tree display options",
           children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            import_ui24.Button,
+            import_ui26.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -3459,7 +3523,7 @@ function GenreTreeView({
         }
       ),
       !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-        import_ui24.IconTextButton,
+        import_ui26.IconTextButton,
         {
           icon: import_lucide_react17.Plus,
           text: "Add root",
@@ -3472,12 +3536,21 @@ function GenreTreeView({
     "div",
     {
       "data-left-panel": isPanelShown && !isCollapsed ? void 0 : "hidden",
-      className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
+      className: [
+        "genre-tree-view relative flex flex-col h-full",
+        placement === "regions" && REGIONS_CLASS,
+        placement === "regions" && searchTrailingAction && "max-md:[&:has([data-detail-panel][data-collapsed=false][data-sheet=true]_[aria-label='Resize_panel'][aria-expanded=true])_.actions-container]:top-[max(var(--layout-touch-target),env(safe-area-inset-top))]",
+        className2
+      ].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.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))] md:left-[var(--layout-panel-inset)] md:top-[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"}`,
+            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))] md:left-[var(--layout-panel-inset)] md:top-[var(--layout-panel-inset)] max-md:flex-col max-md:items-stretch",
+              searchFullWidthBreakpoint === "sm" ? "max-sm:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))]",
+              searchTrailingAction ? "max-md:top-[max(var(--layout-panel-inset),env(safe-area-inset-top))]" : "max-md:top-[var(--layout-band-top)]"
+            ].join(" ") : "left-5 top-5"}`,
             children: actions
           }
         ),
@@ -3607,11 +3680,16 @@ function GenreTreeView({
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            import_ui24.DetailPanel,
+            GenreOverviewDetailPanel,
             {
+              genreUuid: !otherPanel && genreContent.name && selectedGenreUuid ? (0, import_genre_tree31.toGenreUuid)(selectedGenreUuid) : null,
+              scope,
+              getBackendBaseUrl,
+              criteriaOverviewSchema,
               ref: panelRef,
               side: "left",
               title: activePanel?.title ?? "",
+              cover: activePanel?.cover,
               titleInSearch: !isLoading && !isError,
               headerAccent: activePanel?.headerAccent,
               headerActions: expandButton,
@@ -3637,13 +3715,13 @@ function GenreTreeView({
 var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_lucide_react19 = require("lucide-react");
-var import_genre_tree32 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree33 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree34 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var useBrowserLayoutEffect = typeof window === "undefined" ? import_react20.useEffect : import_react20.useLayoutEffect;
+var useBrowserLayoutEffect = typeof window === "undefined" ? import_react21.useEffect : import_react21.useLayoutEffect;
 function TrackListSidebar({
   className: className2 = "",
   renderDuration,
@@ -3655,18 +3733,18 @@ function TrackListSidebar({
   renderArtistLink,
   renderSongLink
 }) {
-  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree32.useTrackList)();
+  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree33.useTrackList)();
   const trackNoun = (0, import_track_noun4.useTrackNoun)();
-  const trackListRef = (0, import_react20.useRef)(null);
-  const previousOriginRef = (0, import_react20.useRef)(trackList?.origin ?? null);
-  const handledAutoAdvanceRequestIdRef = (0, import_react20.useRef)(null);
-  const shouldFollowPlaybackRef = (0, import_react20.useRef)(true);
-  const programmaticScrollTopRef = (0, import_react20.useRef)(null);
-  const userScrollIntentRef = (0, import_react20.useRef)(false);
-  const userScrollIntentTimerRef = (0, import_react20.useRef)(null);
-  const loadMoreSentinelRef = (0, import_react20.useRef)(null);
+  const trackListRef = (0, import_react21.useRef)(null);
+  const previousOriginRef = (0, import_react21.useRef)(trackList?.origin ?? null);
+  const handledAutoAdvanceRequestIdRef = (0, import_react21.useRef)(null);
+  const shouldFollowPlaybackRef = (0, import_react21.useRef)(true);
+  const programmaticScrollTopRef = (0, import_react21.useRef)(null);
+  const userScrollIntentRef = (0, import_react21.useRef)(false);
+  const userScrollIntentTimerRef = (0, import_react21.useRef)(null);
+  const loadMoreSentinelRef = (0, import_react21.useRef)(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const sentinel = loadMoreSentinelRef.current;
     if (!hasMore || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -3686,11 +3764,11 @@ function TrackListSidebar({
     programmaticScrollTopRef.current = null;
     if (trackListRef.current) trackListRef.current.scrollTop = 0;
   }, [trackList?.origin]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const list = trackListRef.current;
     if (!isCollapsed && list?.scrollTop === 0) shouldFollowPlaybackRef.current = true;
   }, [isCollapsed]);
-  (0, import_react20.useEffect)(
+  (0, import_react21.useEffect)(
     () => () => {
       if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
     },
@@ -3758,7 +3836,7 @@ function TrackListSidebar({
               /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "info flex items-center text-body text-[var(--color-text-muted)]", children: [
-              trackList.origin.type === import_genre_tree33.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree33.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
+              trackList.origin.type === import_genre_tree34.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree34.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
           ] }),
@@ -3806,15 +3884,16 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
+var import_lucide_react21 = require("lucide-react");
 var import_tailwind_merge = require("tailwind-merge");
 var import_player14 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree35 = require("@behindthemusictree/app-kit/genre-tree");
-var import_ui25 = require("@behindthemusictree/ui");
+var import_genre_tree36 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui27 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_genre_tree34 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree35 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player13 = require("@behindthemusictree/app-kit/player");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function PlayerControls() {
@@ -3828,7 +3907,7 @@ function PlayerControls() {
     setVolume,
     volume
   } = (0, import_player13.usePlayer)();
-  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree34.useTrackList)();
+  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree35.useTrackList)();
   const currentTime = (0, import_player13.useCurrentTime)();
   const isBusy = isLoading || playState === import_player13.PlayStates.LOADING;
   const isReady = !!playerTrackObject?.isReady && !isBusy && !playerTrackObject.loadError;
@@ -3842,7 +3921,7 @@ function PlayerControls() {
       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_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree34.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree35.formatTime)(safeCurrentTime) }),
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "input",
             {
@@ -3857,7 +3936,7 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree34.formatTime)(safeDuration) })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree35.formatTime)(safeDuration) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
@@ -3935,14 +4014,14 @@ function PlayerPanel({
   renderArtistLink,
   renderSongLink
 }) {
-  const { playerTrackObject, retryPlayback } = (0, import_player14.usePlayer)();
-  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree35.useTrackListSidebarVisibility)();
-  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react21.useState)("");
+  const { playerTrackObject, retryPlayback, stop } = (0, import_player14.usePlayer)();
+  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree36.useTrackListSidebarVisibility)();
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react22.useState)("");
   const loadedTrackTitle = playerTrackObject?.track.title;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
-  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react21.useState)(false);
+  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react22.useState)(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
@@ -3977,7 +4056,7 @@ function PlayerPanel({
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          import_ui25.PanelEdgeTab,
+          import_ui27.PanelEdgeTab,
           {
             side: "right",
             edge: tabEdge,
@@ -3995,7 +4074,10 @@ function PlayerPanel({
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }),
+                  playerTrackObject && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_ui27.IconButton, { "aria-label": "Close player", onClick: stop, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react21.X, { "aria-hidden": "true", className: "h-4 w-4" }) })
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_player14.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
                   playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
@@ -4033,7 +4115,7 @@ function PlayerPanel({
 // src/genre-tree/Rating.tsx
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
-var import_genre_tree36 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree37 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
@@ -4045,7 +4127,7 @@ function Rating({ rating, handleChange }) {
         className: "w-6 h-6 opacity-0",
         type: "radio",
         name: "rating",
-        value: i === 0 ? import_genre_tree36.FORM_RATING_NULL_VALUE : i,
+        value: i === 0 ? import_genre_tree37.FORM_RATING_NULL_VALUE : i,
         checked: rating === (i === 0 ? null : i),
         onChange: handleChange
       }
@@ -4054,7 +4136,7 @@ function Rating({ rating, handleChange }) {
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         import_ai.AiOutlineStar,
         {
-          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree36.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_tree37.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "flex-grow w-8" }),
@@ -4069,8 +4151,8 @@ function Rating({ rating, handleChange }) {
 }
 
 // src/genre-tree/EntityDetailPanel.tsx
-var import_react22 = require("react");
-var import_ui26 = require("@behindthemusictree/ui");
+var import_react23 = require("react");
+var import_ui28 = require("@behindthemusictree/ui");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function EntityDetailPanel({
   scope,
@@ -4088,8 +4170,8 @@ function EntityDetailPanel({
   edgeTab,
   ...navigation
 }) {
-  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react22.useState)(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react22.useState)(null);
+  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react23.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react23.useState)(null);
   const panel = useEntityPanel({
     scope,
     getBackendBaseUrl,
@@ -4114,10 +4196,11 @@ function EntityDetailPanel({
   });
   if (!panel) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_ui26.DetailPanel,
+    import_ui28.DetailPanel,
     {
       side: "left",
       title: panel.title,
+      cover: panel.cover,
       titleInSearch: true,
       onClose: panel.onClose,
       collapsed,