@behindthemusictree/app-kit-ui 0.0.0-stage → 24.0.1

package/dist/chunk-BPCFNBFO.js

@@ -0,0 +1,2297 @@
+import {
+  BasePopup_default,
+  InternalErrorPopup
+} from "./chunk-VDXUW7PP.js";
+
+// src/genre-tree/GenreTreeView.tsx
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef4, useState as useState4 } from "react";
+import { Plus as Plus2 } from "lucide-react";
+import { IconTextButton, Button, SegmentedControl } from "@behindthemusictree/ui";
+import {
+  GenreTreeWheelSkeleton,
+  GenreTreeViewSkeleton
+} from "@behindthemusictree/genre-tree-view";
+import {
+  useArtistSearch
+} from "@behindthemusictree/app-kit/genre-tree";
+import { useGenreTreeViewState, useArtist as useArtist2 } from "@behindthemusictree/app-kit/genre-tree";
+import { usePlayer as usePlayer8 } from "@behindthemusictree/app-kit/player";
+import { usePopup as usePopup4 } from "@behindthemusictree/app-kit/popup";
+
+// src/genre-tree/GenreDetailExtras.tsx
+import { Skeleton as Skeleton2 } from "@behindthemusictree/ui";
+import { useFetchGenreOverview } from "@behindthemusictree/app-kit/genre-tree";
+
+// src/genre-tree/ClampedText.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ClampedText({ children, className = "" }) {
+  const ref = useRef(null);
+  const [expanded, setExpanded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || expanded) return;
+    setOverflows(element.scrollHeight > element.clientHeight);
+  }, [children, expanded]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { ref, className: `${className} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((value) => !value),
+        className: "mt-1 text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
+        children: expanded ? "Show less" : "Show more"
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+import { useEffect, useRef as useRef2 } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { z } from "zod";
+import { FaPlay, FaPause } from "react-icons/fa";
+import { RingLoader, Skeleton } from "@behindthemusictree/ui";
+import { useSession } from "@behindthemusictree/app-kit/auth";
+import { useFetchWrapper } from "@behindthemusictree/app-kit/transport";
+import { PaginatedResponseSchema } from "@behindthemusictree/app-kit/transport";
+import { parseWithLog } from "@behindthemusictree/app-kit/transport";
+import { usePlayer } from "@behindthemusictree/app-kit/player";
+import { PlayStates } from "@behindthemusictree/app-kit/player";
+import { usePopup } from "@behindthemusictree/app-kit/popup";
+
+// src/genre-tree/UnplayableReason.tsx
+import { FaYoutube } from "react-icons/fa";
+import { NO_VIDEO_LABEL } from "@behindthemusictree/app-kit/genre-tree";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function UnplayableReason({ reason }) {
+  if (reason !== NO_VIDEO_LABEL) return /* @__PURE__ */ jsx2(Fragment2, { children: reason });
+  return /* @__PURE__ */ jsxs2("span", { role: "img", "aria-label": reason, className: "relative inline-flex shrink-0 items-center", children: [
+    /* @__PURE__ */ jsx2(FaYoutube, { size: 16, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "absolute left-1/2 top-1/2 h-0.5 w-[130%] -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded bg-current" })
+  ] });
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+import { ErrorCode } from "@behindthemusictree/app-kit/transport";
+import { genrePlaylistQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
+import { libraryEndpoints, libraryQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
+import { isSong, songUnplayableReason, SongDetailedSchema } from "@behindthemusictree/app-kit/genre-tree";
+import { useTrackList } from "@behindthemusictree/app-kit/genre-tree";
+
+// src/genre-tree/MusicBrainzRecordingLink.tsx
+import { FaExternalLinkAlt } from "react-icons/fa";
+import { musicBrainzRecordingUrl } from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MusicBrainzRecordingLink({ song }) {
+  const url = musicBrainzRecordingUrl(song);
+  if (!url) return null;
+  return /* @__PURE__ */ jsx3(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": `View ${song.title} on MusicBrainz`,
+      title: "View on MusicBrainz",
+      className: "inline-flex shrink-0 items-center opacity-50 hover:opacity-100 focus-visible:opacity-100",
+      onClick: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsx3(FaExternalLinkAlt, { size: 10 })
+    }
+  );
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+import { ArtistNames } from "@behindthemusictree/app-kit/genre-tree";
+import { capitalize, useTrackNoun } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CATALOGUE_PAGE_SIZE = 100;
+var SongPageSchema = PaginatedResponseSchema(SongDetailedSchema).extend({
+  overallTotal: z.number().nullable(),
+  page: z.number().nullable(),
+  totalPages: z.number().nullable()
+});
+var TEXT_CELL = "min-w-0 flex-1 truncate [@container(min-width:40rem)]:flex [@container(min-width:40rem)]:gap-2";
+var TITLE_CELL = "[@container(min-width:40rem)]:flex-[2] [@container(min-width:40rem)]:truncate";
+var COLUMN_CELL = "[@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:truncate";
+var ALBUM_CELL = `hidden [@container(min-width:40rem)]:block ${COLUMN_CELL}`;
+var SEPARATOR = "[@container(min-width:40rem)]:hidden";
+var nextCursor = (next) => {
+  const cursor = new URL(next).searchParams.get("cursor");
+  if (!cursor) throw new Error(`Songs next link has no cursor: ${next}`);
+  return cursor;
+};
+function GenrePlaylistTracks({
+  genreUuid,
+  genrePlaylist,
+  scope,
+  getBackendBaseUrl,
+  renderArtistLink,
+  renderSongLeading,
+  renderSongActions,
+  renderTracksToolbar,
+  artist = null
+}) {
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList();
+  const { session, sessionRestored } = useSession();
+  const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer();
+  const { showPopup } = usePopup();
+  const trackNoun = useTrackNoun();
+  const { uuid } = genrePlaylist;
+  const { fetch } = useFetchWrapper(getBackendBaseUrl);
+  const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid),
+    queryFn: async ({ pageParam }) => {
+      if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
+      const response = await fetch(
+        libraryEndpoints.reference.songs.list(),
+        true,
+        false,
+        {},
+        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+      );
+      const parsed = parseWithLog(SongPageSchema, response, "GenrePlaylistTracks");
+      return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
+    },
+    initialPageParam: scope === "me" ? 1 : "",
+    getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
+    enabled: scope !== "me" || sessionRestored && !!session?.accessToken
+  });
+  const sentinelRef = useRef2(null);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!hasNextPage || isFetchingNextPage || !sentinel) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void fetchNextPage();
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  const pages = data?.pages ?? [];
+  const tracks = pages.flatMap((page) => page.tracks);
+  const total = pages[0]?.total ?? void 0;
+  const play = (startSongUuid) => {
+    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    started.catch((error) => {
+      console.error("Failed to play genre playlist:", error);
+      showPopup(/* @__PURE__ */ jsx4(InternalErrorPopup, { errorCode: ErrorCode.CLIENT_UNKNOWN }));
+    });
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "gtv-info-panel-children", children: [
+    /* @__PURE__ */ jsxs3("span", { className: "gtv-info-panel-children-title", children: [
+      capitalize(trackNoun.plural),
+      total !== void 0 && ` (${total})`
+    ] }),
+    renderTracksToolbar?.(),
+    isPending ? /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ jsxs3("p", { role: "alert", children: [
+      "Couldn't load ",
+      trackNoun.plural,
+      ".",
+      " ",
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx4("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs3("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
+      tracks.map((track, index) => {
+        const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
+        const isCurrent = playerTrackObject?.track.id === track.uuid;
+        const isPlaying = isCurrent && playState === PlayStates.PLAYING;
+        const text = /* @__PURE__ */ jsxs3("span", { className: TEXT_CELL, children: [
+          /* @__PURE__ */ jsx4("span", { className: TITLE_CELL, children: track.title }),
+          track.artists?.length ? /* @__PURE__ */ jsx4("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ jsx4("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ jsx4(ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ jsx4("span", { className: ALBUM_CELL, children: track.album.name })
+        ] });
+        const leading = renderSongLeading?.(track, index);
+        const actions = renderSongActions?.(track);
+        const unplayableReason = isSong(track) ? songUnplayableReason(track) : null;
+        if (unplayableReason) {
+          return /* @__PURE__ */ jsxs3("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", title: unplayableReason, children: [
+            leading,
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                disabled: true,
+                "aria-disabled": "true",
+                "aria-label": `${label} \u2014 ${unplayableReason}`,
+                className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
+                children: /* @__PURE__ */ jsx4(FaPlay, { size: 10 })
+              }
+            ),
+            text,
+            isSong(track) && /* @__PURE__ */ jsx4(MusicBrainzRecordingLink, { song: track }),
+            /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-xs", children: /* @__PURE__ */ jsx4(UnplayableReason, { reason: unplayableReason }) }),
+            actions
+          ] }, track.uuid);
+        }
+        return /* @__PURE__ */ jsxs3(
+          "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__ */ jsx4(
+                "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 !== PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
+                  onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
+                  children: isCurrent && playState === PlayStates.LOADING ? /* @__PURE__ */ jsx4(RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ jsx4(FaPause, { size: 10 }) : /* @__PURE__ */ jsx4(FaPlay, { size: 10 })
+                }
+              ),
+              text,
+              isSong(track) && /* @__PURE__ */ jsx4(MusicBrainzRecordingLink, { song: track }),
+              actions
+            ]
+          },
+          track.uuid
+        );
+      }),
+      hasNextPage && /* @__PURE__ */ jsx4("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
+    ] })
+  ] });
+}
+
+// src/genre-tree/GenreDetailExtras.tsx
+import { useTrackNoun as useTrackNoun2 } from "@behindthemusictree/app-kit/track-noun";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function GenreDetailExtras({
+  genreUuid,
+  genrePlaylist,
+  scope,
+  getBackendBaseUrl,
+  criteriaOverviewSchema,
+  renderGenreDetailExtras,
+  renderArtistLink,
+  renderSummary,
+  renderEssentialTracks,
+  family,
+  ...trackSlots
+}) {
+  const trackNoun = useTrackNoun2();
+  const { data: overview, isPending } = useFetchGenreOverview(
+    genreUuid,
+    scope,
+    getBackendBaseUrl,
+    criteriaOverviewSchema
+  );
+  if (isPending) {
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
+        /* @__PURE__ */ jsx5("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
+        /* @__PURE__ */ jsx5(Skeleton2, { className: "h-4 w-3/4" })
+      ] }),
+      family
+    ] });
+  }
+  if (!overview) return /* @__PURE__ */ jsx5(Fragment3, { children: family });
+  const { summary, description, summarySourceUrl, essentialSongs } = overview;
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    description && /* @__PURE__ */ jsx5("div", { className: "px-3.5 py-2.5", children: /* @__PURE__ */ jsx5(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text-muted)]", children: description }, genreUuid) }),
+    renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
+      /* @__PURE__ */ jsx5("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
+      /* @__PURE__ */ jsx5(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid),
+      summarySourceUrl && /* @__PURE__ */ jsx5(
+        "a",
+        {
+          href: summarySourceUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mt-1 inline-block text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
+          children: "Source: Wikipedia"
+        }
+      )
+    ] }),
+    renderSummary && summarySourceUrl && /* @__PURE__ */ jsx5(
+      "a",
+      {
+        href: summarySourceUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "mx-3.5 mb-2.5 inline-block text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
+        children: "Source: Wikipedia"
+      }
+    ),
+    family,
+    renderGenreDetailExtras?.(overview),
+    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ jsxs4("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "gtv-info-panel-children-title", children: [
+        "Essential ",
+        trackNoun.plural
+      ] }),
+      essentialSongs.length > 0 ? /* @__PURE__ */ jsx5("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx5("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx5("p", { className: "mt-1", children: "\u2014" })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      GenrePlaylistTracks,
+      {
+        genreUuid,
+        genrePlaylist,
+        scope,
+        getBackendBaseUrl,
+        renderArtistLink,
+        ...trackSlots
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/playlist-tree/TreePerRoot.tsx
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import {
+  GenreTree,
+  getGenreTreeColor
+} from "@behindthemusictree/genre-tree-view";
+import { usePlayer as usePlayer2 } from "@behindthemusictree/app-kit/player";
+import { usePopup as usePopup2 } from "@behindthemusictree/app-kit/popup";
+import { ErrorCode as ErrorCode2 } from "@behindthemusictree/app-kit/transport";
+
+// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
+import { useCallback, useMemo } from "react";
+import {
+  TrackListOriginType,
+  useTrackList as useTrackList2
+} from "@behindthemusictree/app-kit/genre-tree";
+function useGenrePlaylistPlayback({
+  scope,
+  genrePlaylists,
+  artist = null
+}) {
+  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList2();
+  const origin = trackList?.origin;
+  const playingNodeId = useMemo(() => {
+    if (!origin) return null;
+    if (!artist) return origin.type === TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
+    if (origin.type !== TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
+    const { genreUuid } = origin;
+    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
+  }, [origin, artist, genrePlaylists]);
+  const play = useCallback(
+    async (genrePlaylist) => {
+      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
+      if (!genrePlaylist.criteria) return;
+      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
+    },
+    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
+  );
+  return useMemo(() => ({ playingNodeId, play }), [playingNodeId, play]);
+}
+
+// src/genre-tree/playlist-tree/TreePerRoot.tsx
+import { capitalize as capitalize2, useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function GenrePlaylistTreePerRoot({
+  scope,
+  className,
+  rootUuid,
+  genrePlaylistTreePerRoot,
+  handleGenreCreationAction,
+  handleGenreRenameAction,
+  additionalActions,
+  onNodeClick,
+  onNodeHover,
+  renderInfoPanelBody,
+  selectedNodeId,
+  onSelectedNodeChange,
+  hideInfoPanelClose,
+  hideInfoPanelTitle,
+  readOnly = false,
+  showToolbar,
+  wheelZoom,
+  controlsOrientation,
+  defaultViewport,
+  onViewportChange,
+  playback,
+  ...infoPanelCuration
+}) {
+  const { isPlaying, setIsPlaying } = usePlayer2();
+  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
+  const { playingNodeId, play } = playback ?? defaultPlayback;
+  const trackNoun = useTrackNoun3();
+  const { showPopup } = usePopup2();
+  const nodes = useMemo2(
+    () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
+      id: genrePlaylist.uuid,
+      parentId: genrePlaylist.parent?.uuid ?? null,
+      name: genrePlaylist.name,
+      itemCount: genrePlaylist.tracksCount,
+      actionable: Boolean(genrePlaylist.criteria),
+      side: genrePlaylist.criteria?.side ?? void 0,
+      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
+      umbrella: genrePlaylist.isUmbrella
+    })),
+    [genrePlaylistTreePerRoot]
+  );
+  const handlePlayPause = useCallback2(
+    (nodeId) => {
+      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === nodeId);
+      if (!genrePlaylist) return;
+      if (nodeId === playingNodeId) {
+        setIsPlaying(!isPlaying);
+        return;
+      }
+      if (genrePlaylist.tracksCount === 0) {
+        return;
+      }
+      play(genrePlaylist).catch((error) => {
+        console.error("Failed to load genre playlist tracks:", error);
+        showPopup(/* @__PURE__ */ jsx6(InternalErrorPopup, { errorCode: ErrorCode2.CLIENT_UNKNOWN }));
+      });
+    },
+    [
+      genrePlaylistTreePerRoot,
+      playingNodeId,
+      isPlaying,
+      setIsPlaying,
+      play,
+      showPopup
+    ]
+  );
+  const handleAddChild = useCallback2(
+    (parentId) => {
+      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === parentId);
+      if (!genrePlaylist?.criteria) return;
+      handleGenreCreationAction(genrePlaylist.criteria);
+    },
+    [genrePlaylistTreePerRoot, handleGenreCreationAction]
+  );
+  const handleRenameRequest = useCallback2(
+    (node) => {
+      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === node.id);
+      if (!genrePlaylist?.criteria) return;
+      handleGenreRenameAction(genrePlaylist.criteria);
+    },
+    [genrePlaylistTreePerRoot, handleGenreRenameAction]
+  );
+  const handleDeleteRequest = useCallback2((node) => {
+    if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
+    }
+  }, []);
+  return /* @__PURE__ */ jsx6(
+    GenreTree,
+    {
+      className,
+      nodes,
+      itemCountLabel: `${capitalize2(trackNoun.singular)} count`,
+      rootColor: getGenreTreeColor(rootUuid),
+      playingNodeId,
+      playState: isPlaying ? "playing" : "paused",
+      onPlayPause: handlePlayPause,
+      onAddChild: readOnly ? void 0 : handleAddChild,
+      onRenameRequest: readOnly ? void 0 : handleRenameRequest,
+      onDeleteRequest: readOnly ? void 0 : handleDeleteRequest,
+      additionalActions,
+      onNodeClick,
+      onNodeHover,
+      renderInfoPanelBody,
+      selectedNodeId,
+      onSelectedNodeChange,
+      hideInfoPanelClose,
+      hideInfoPanelTitle,
+      showToolbar,
+      wheelZoom,
+      controlsOrientation,
+      defaultViewport,
+      onViewportChange,
+      ...infoPanelCuration,
+      readOnly
+    }
+  );
+}
+
+// src/genre-tree/playlist-tree/TreeWheel.tsx
+import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import {
+  GenreTreeWheel
+} from "@behindthemusictree/genre-tree-view";
+import { usePlayer as usePlayer3 } from "@behindthemusictree/app-kit/player";
+import { usePopup as usePopup3 } from "@behindthemusictree/app-kit/popup";
+import { ErrorCode as ErrorCode3 } from "@behindthemusictree/app-kit/transport";
+import { capitalize as capitalize3, useTrackNoun as useTrackNoun4 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function GenrePlaylistTreeWheel({
+  scope,
+  className,
+  genrePlaylists,
+  handleGenreCreationAction,
+  handleGenreRenameAction,
+  additionalActions,
+  onNodeClick,
+  onNodeHover,
+  renderInfoPanelBody,
+  selectedNodeId,
+  onSelectedNodeChange,
+  hideInfoPanelClose,
+  hideInfoPanelTitle,
+  readOnly = false,
+  allowWheelRotation,
+  showToolbar,
+  controlsOrientation,
+  defaultViewport,
+  onViewportChange,
+  playback,
+  ...infoPanelCuration
+}) {
+  const { isPlaying, setIsPlaying } = usePlayer3();
+  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
+  const { playingNodeId, play } = playback ?? defaultPlayback;
+  const trackNoun = useTrackNoun4();
+  const { showPopup } = usePopup3();
+  const nodes = useMemo3(
+    () => genrePlaylists.map((genrePlaylist) => ({
+      id: genrePlaylist.uuid,
+      parentId: genrePlaylist.parent?.uuid ?? null,
+      name: genrePlaylist.name,
+      itemCount: genrePlaylist.tracksCount,
+      actionable: Boolean(genrePlaylist.criteria),
+      side: genrePlaylist.criteria?.side ?? void 0,
+      wikidataId: genrePlaylist.criteria?.wikidataId ?? null
+    })),
+    [genrePlaylists]
+  );
+  const handlePlayPause = useCallback3(
+    (nodeId) => {
+      const genrePlaylist = genrePlaylists.find((g) => g.uuid === nodeId);
+      if (!genrePlaylist) return;
+      if (nodeId === playingNodeId) {
+        setIsPlaying(!isPlaying);
+        return;
+      }
+      if (genrePlaylist.tracksCount === 0) {
+        return;
+      }
+      play(genrePlaylist).catch((error) => {
+        console.error("Failed to load genre playlist tracks:", error);
+        showPopup(/* @__PURE__ */ jsx7(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
+      });
+    },
+    [
+      genrePlaylists,
+      playingNodeId,
+      isPlaying,
+      setIsPlaying,
+      play,
+      showPopup
+    ]
+  );
+  const handleAddChild = useCallback3(
+    (parentId) => {
+      const genrePlaylist = genrePlaylists.find((g) => g.uuid === parentId);
+      if (!genrePlaylist?.criteria) return;
+      handleGenreCreationAction(genrePlaylist.criteria);
+    },
+    [genrePlaylists, handleGenreCreationAction]
+  );
+  const handleRenameRequest = useCallback3(
+    (node) => {
+      const genrePlaylist = genrePlaylists.find((g) => g.uuid === node.id);
+      if (!genrePlaylist?.criteria) return;
+      handleGenreRenameAction(genrePlaylist.criteria);
+    },
+    [genrePlaylists, handleGenreRenameAction]
+  );
+  const handleDeleteRequest = useCallback3((node) => {
+    if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
+    }
+  }, []);
+  return /* @__PURE__ */ jsx7(
+    GenreTreeWheel,
+    {
+      className,
+      nodes,
+      itemCountLabel: `${capitalize3(trackNoun.singular)} count`,
+      playingNodeId,
+      playState: isPlaying ? "playing" : "paused",
+      onPlayPause: handlePlayPause,
+      onAddChild: readOnly ? void 0 : handleAddChild,
+      onRenameRequest: readOnly ? void 0 : handleRenameRequest,
+      onDeleteRequest: readOnly ? void 0 : handleDeleteRequest,
+      additionalActions,
+      onNodeClick,
+      onNodeHover,
+      renderInfoPanelBody,
+      selectedNodeId,
+      onSelectedNodeChange,
+      hideInfoPanelClose,
+      hideInfoPanelTitle,
+      allowWheelRotation,
+      showToolbar,
+      controlsOrientation,
+      defaultViewport,
+      onViewportChange,
+      ...infoPanelCuration,
+      readOnly
+    }
+  );
+}
+
+// src/genre-tree/playlist-tree/TreeWheelRadialPopCore.tsx
+import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import {
+  GenreTreeOutline,
+  GenreTreeWheelRadialPopCore
+} from "@behindthemusictree/genre-tree-view";
+import { usePlayer as usePlayer4 } from "@behindthemusictree/app-kit/player";
+import { capitalize as capitalize4, useTrackNoun as useTrackNoun5 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function GenrePlaylistTreeWheelRadialPopCore(props) {
+  const {
+    scope,
+    className,
+    genrePlaylists,
+    handleGenreCreationAction,
+    handleGenreRenameAction,
+    additionalActions,
+    onNodeClick,
+    onNodeHover,
+    renderInfoPanelBody,
+    selectedNodeId,
+    onSelectedNodeChange,
+    hideInfoPanelClose,
+    hideInfoPanelTitle,
+    readOnly = false,
+    allowWheelRotation,
+    showToolbar,
+    controlsOrientation,
+    outline = false,
+    defaultViewport,
+    onViewportChange,
+    playback
+  } = props;
+  const focus = props;
+  const infoPanelCuration = {
+    editMode: props.editMode,
+    onEditModeChange: props.onEditModeChange,
+    renderTitleEditor: props.renderTitleEditor,
+    renderParentsEditor: props.renderParentsEditor,
+    renderDangerZone: props.renderDangerZone,
+    expanded: props.expanded,
+    onExpandedChange: props.onExpandedChange,
+    collapsed: props.collapsed,
+    hideExpandButton: props.hideExpandButton,
+    overlayPanel: props.overlayPanel
+  };
+  const { isPlaying, setIsPlaying } = usePlayer4();
+  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
+  const { playingNodeId, play } = playback ?? defaultPlayback;
+  const trackNoun = useTrackNoun5();
+  const nodes = useMemo4(
+    () => genrePlaylists.map((genrePlaylist) => ({
+      id: genrePlaylist.uuid,
+      parentId: genrePlaylist.parent?.uuid ?? null,
+      name: genrePlaylist.name,
+      itemCount: genrePlaylist.tracksCount,
+      actionable: Boolean(genrePlaylist.criteria),
+      detached: !genrePlaylist.criteria,
+      side: genrePlaylist.criteria?.side ?? void 0,
+      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
+      umbrella: genrePlaylist.isUmbrella
+    })),
+    [genrePlaylists]
+  );
+  const handlePlayPause = useCallback4(
+    (nodeId) => {
+      const genrePlaylist = genrePlaylists.find((g) => g.uuid === nodeId);
+      if (!genrePlaylist) return;
+      if (nodeId === playingNodeId) {
+        setIsPlaying(!isPlaying);
+        return;
+      }
+      if (genrePlaylist.tracksCount === 0) {
+        return;
+      }
+      play(genrePlaylist).catch((error) => {
+        console.error("Failed to load genre playlist tracks:", error);
+      });
+    },
+    [genrePlaylists, playingNodeId, isPlaying, setIsPlaying, play]
+  );
+  const handleAddChild = useCallback4(
+    (parentId) => {
+      const genrePlaylist = genrePlaylists.find((g) => g.uuid === parentId);
+      if (!genrePlaylist?.criteria) return;
+      handleGenreCreationAction(genrePlaylist.criteria);
+    },
+    [genrePlaylists, handleGenreCreationAction]
+  );
+  const handleRenameRequest = useCallback4(
+    (node) => {
+      const genrePlaylist = genrePlaylists.find((g) => g.uuid === node.id);
+      if (!genrePlaylist?.criteria) return;
+      handleGenreRenameAction(genrePlaylist.criteria);
+    },
+    [genrePlaylists, handleGenreRenameAction]
+  );
+  const handleDeleteRequest = useCallback4((node) => {
+    if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
+    }
+  }, []);
+  const treeProps = {
+    className,
+    nodes,
+    itemCountLabel: `${capitalize4(trackNoun.singular)} count`,
+    playingNodeId,
+    playState: isPlaying ? "playing" : "paused",
+    onPlayPause: handlePlayPause,
+    onAddChild: readOnly ? void 0 : handleAddChild,
+    onRenameRequest: readOnly ? void 0 : handleRenameRequest,
+    onDeleteRequest: readOnly ? void 0 : handleDeleteRequest,
+    additionalActions,
+    onNodeClick,
+    onNodeHover,
+    renderInfoPanelBody,
+    selectedNodeId,
+    onSelectedNodeChange,
+    hideInfoPanelClose,
+    hideInfoPanelTitle,
+    showToolbar,
+    ...infoPanelCuration,
+    readOnly
+  };
+  return outline ? /* @__PURE__ */ jsx8(GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ jsx8(
+    GenreTreeWheelRadialPopCore,
+    {
+      ...treeProps,
+      allowWheelRotation,
+      controlsOrientation,
+      defaultViewport,
+      onViewportChange,
+      ...focus.onFocusGenreChange ? { focusNodeId: focus.focusGenreUuid, onFocusChange: focus.onFocusGenreChange } : { focusNodeId: void 0, onFocusChange: void 0 }
+    }
+  );
+}
+
+// src/genre-tree/GenreTreeWheelHandoff.tsx
+import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
+  const [revealed, setRevealed] = useState2(false);
+  const onRevealedChangeRef = useRef3(onRevealedChange);
+  onRevealedChangeRef.current = onRevealedChange;
+  useEffect2(() => {
+    let innerFrame = 0;
+    const outerFrame = requestAnimationFrame(() => {
+      innerFrame = requestAnimationFrame(() => {
+        setRevealed(true);
+        onRevealedChangeRef.current?.(true);
+      });
+    });
+    return () => {
+      onRevealedChangeRef.current?.(false);
+      cancelAnimationFrame(outerFrame);
+      cancelAnimationFrame(innerFrame);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "absolute inset-0 transition-opacity duration-150 ease-out",
+        style: { opacity: revealed ? 1 : 0, pointerEvents: revealed ? "auto" : "none" },
+        "aria-hidden": !revealed,
+        children
+      }
+    ),
+    !revealed && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
+  ] });
+}
+
+// src/genre-tree/GenreSearch.tsx
+import { ArrowLeft, Search, X } from "lucide-react";
+import { Input } from "@behindthemusictree/ui";
+import { useGenreSearch } from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function GenreSearch({
+  genrePlaylists,
+  onSelect,
+  selectedName = null,
+  onClear,
+  onPrevious,
+  placeholder,
+  onQueryChange,
+  extraResults
+}) {
+  const { query, setQuery, results, canClear, clear, select } = useGenreSearch({
+    genrePlaylists,
+    onSelect,
+    selectedName,
+    onClear
+  });
+  const extraItems = query !== "" && query !== selectedName ? extraResults?.items ?? [] : [];
+  const label = extraResults ? "Search" : "Search a genre";
+  const showList = results.length > 0 || extraItems.length > 0;
+  const heading = "px-3 pt-2 pb-1 text-xs font-medium uppercase text-[var(--color-text-muted)]";
+  return /* @__PURE__ */ jsxs6("div", { className: "genre-search relative w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0", children: [
+    onPrevious && /* @__PURE__ */ jsx10(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Previous",
+        title: "Previous",
+        className: "genre-search-previous absolute left-2 top-1/2 z-10 hidden p-1.5 text-[var(--color-text-muted)] rounded-full -translate-y-1/2 hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
+        onClick: onPrevious,
+        children: /* @__PURE__ */ jsx10(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      Input,
+      {
+        type: "text",
+        value: query,
+        onChange: (event) => {
+          setQuery(event.target.value);
+          onQueryChange?.(event.target.value);
+        },
+        placeholder: placeholder ?? `${label}\u2026`,
+        "aria-label": label,
+        className: "h-[var(--layout-search-h,3rem)] pl-6 pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md"
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
+      /* @__PURE__ */ jsx10("span", { className: "p-2 text-[var(--color-text-muted)] pointer-events-none", children: /* @__PURE__ */ jsx10(Search, { "aria-hidden": "true", className: "w-6 h-6" }) }),
+      canClear && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          className: "p-2 text-[var(--color-text-muted)] rounded-full hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
+          onClick: () => {
+            clear();
+            onQueryChange?.("");
+          },
+          children: /* @__PURE__ */ jsx10(X, { "aria-hidden": "true", className: "w-6 h-6" })
+        }
+      )
+    ] }),
+    extraResults?.status && /* @__PURE__ */ jsx10("p", { role: "status", "aria-live": "polite", className: "sr-only", children: extraResults.status }),
+    showList && /* @__PURE__ */ jsxs6("ul", { className: "genre-search-results absolute z-40 w-full max-h-64 mt-1 overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-xl shadow-md", children: [
+      extraResults && results.length > 0 && /* @__PURE__ */ jsx10("li", { className: heading, children: "Genres" }),
+      results.map((genrePlaylist) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          className: "w-full px-3 py-1.5 text-left hover:bg-[var(--color-surface-muted)]",
+          onClick: () => {
+            select(genrePlaylist);
+            onQueryChange?.("");
+          },
+          children: [
+            genrePlaylist.name,
+            genrePlaylist.isUmbrella && /* @__PURE__ */ jsx10("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
+          ]
+        }
+      ) }, genrePlaylist.uuid)),
+      extraResults && extraItems.length > 0 && /* @__PURE__ */ jsx10("li", { className: heading, children: extraResults.label }),
+      extraItems.map((item) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: "w-full px-3 py-1.5 text-left hover:bg-[var(--color-surface-muted)]",
+          onClick: () => {
+            setQuery("");
+            onQueryChange?.("");
+            item.onSelect();
+          },
+          children: item.content
+        }
+      ) }, item.key))
+    ] })
+  ] });
+}
+
+// src/genre-tree/GenreActionBand.tsx
+import { MoveUpRight, Pause, Pencil, Play, Plus, ZoomIn } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function GenreActionBand({
+  node,
+  onPlayPause,
+  isPlaying = false,
+  onZoomIn,
+  onAddChild,
+  onRename,
+  onChangeParent,
+  additionalActions
+}) {
+  const items = [];
+  const adminItems = [];
+  if (onPlayPause) {
+    items.push({
+      key: "play-pause",
+      label: isPlaying ? "Pause" : "Play",
+      icon: isPlaying ? /* @__PURE__ */ jsx11(Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx11(Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onPlayPause
+    });
+  }
+  if (onZoomIn) {
+    items.push({
+      key: "zoom-in",
+      label: "Focus",
+      icon: /* @__PURE__ */ jsx11(ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onZoomIn
+    });
+  }
+  if (onAddChild) {
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ jsx11(Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+  }
+  if (onRename) {
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ jsx11(Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+  }
+  if (onChangeParent) {
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ jsx11(MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+  }
+  for (const action of additionalActions?.(node) ?? []) {
+    items.push({
+      key: action.key,
+      label: action.label(node),
+      icon: action.icon(node),
+      onClick: (event) => action.onClick(event, node),
+      disabled: action.enabled ? !action.enabled(node) : false
+    });
+  }
+  if (items.length === 0 && adminItems.length === 0) return null;
+  const renderItems = (list) => list.map((item) => /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      disabled: item.disabled,
+      onClick: item.onClick,
+      className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none disabled:opacity-50",
+      children: [
+        /* @__PURE__ */ jsx11("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
+        item.label
+      ]
+    },
+    item.key
+  ));
+  return /* @__PURE__ */ jsxs7("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
+    items.length > 0 && /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: renderItems(items) }),
+    adminItems.length > 0 && /* @__PURE__ */ jsxs7(
+      "section",
+      {
+        "aria-label": "Admin actions",
+        className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx11("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
+          /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/PanelEdgeTab.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var buttonClassName = "flex h-12 w-full items-center justify-center p-0 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-primary)]";
+function PanelEdgeTab({ side, edge, center, controls, className }) {
+  if (!edge && !center) return null;
+  const isLeft = side === "left";
+  const EdgeIcon = isLeft ? ChevronLeft : ChevronRight;
+  const CenterIcon = isLeft ? ChevronRight : ChevronLeft;
+  const renderButton = (action, icon) => /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      "aria-label": action.label,
+      title: action.label,
+      "aria-controls": controls,
+      "aria-expanded": action.expanded,
+      className: buttonClassName,
+      onClick: action.onClick,
+      children: icon
+    }
+  );
+  const edgeButton = edge && renderButton(edge, /* @__PURE__ */ jsx12(EdgeIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const centerButton = center && renderButton(center, /* @__PURE__ */ jsx12(CenterIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const buttons = isLeft ? [edgeButton, centerButton] : [centerButton, edgeButton];
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: twMerge(
+        "panel-edge-tab flex w-[var(--layout-edge-tab-w)] flex-col overflow-hidden bg-[var(--color-surface)] shadow-[0_1px_2px_rgba(60,64,67,0.3),0_2px_6px_2px_rgba(60,64,67,0.15)] [clip-path:inset(-0.5rem_-0.5rem_-0.5rem_0)]",
+        isLeft ? "rounded-r-lg" : "rounded-l-lg [clip-path:inset(-0.5rem_0_-0.5rem_-0.5rem)]",
+        className
+      ),
+      children: [
+        buttons[0],
+        buttons[0] && buttons[1] && /* @__PURE__ */ jsx12("div", { role: "presentation", className: "h-px shrink-0 bg-[var(--color-border)]" }),
+        buttons[1]
+      ]
+    }
+  );
+}
+
+// src/genre-tree/ChangeParentPopup.tsx
+import { useEffect as useEffect3, useMemo as useMemo5 } from "react";
+import {
+  getReparentCandidates,
+  useUpdateGenre
+} from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChangeParentPopup({
+  genrePlaylist,
+  genrePlaylists,
+  scope,
+  getBackendBaseUrl,
+  onClose
+}) {
+  const { mutate, isPending, formErrors } = useUpdateGenre(scope, getBackendBaseUrl);
+  const candidates = useMemo5(
+    () => getReparentCandidates(genrePlaylists, genrePlaylist.uuid),
+    [genrePlaylists, genrePlaylist.uuid]
+  );
+  useEffect3(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs9(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ jsxs9("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
+      "Current parent: ",
+      genrePlaylist.parent?.name ?? "none"
+    ] }),
+    /* @__PURE__ */ jsx13("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx13(
+      GenreSearch,
+      {
+        genrePlaylists: candidates,
+        onSelect: (newParent) => mutate({ uuid: genrePlaylist.criteria.uuid, data: { parent: newParent.criteria.uuid } }, { onSuccess: onClose }),
+        placeholder: "Search a new parent\u2026"
+      }
+    ) }),
+    formErrors.length > 0 && /* @__PURE__ */ jsx13("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+  ] });
+}
+
+// src/genre-tree/artist/useArtistPanel.tsx
+import { Skeleton as Skeleton4 } from "@behindthemusictree/ui";
+import { useArtist } from "@behindthemusictree/app-kit/genre-tree";
+
+// src/genre-tree/artist/ArtistHeader.tsx
+import { FieldList } from "@behindthemusictree/ui";
+
+// src/genre-tree/artist/ArtistLinks.tsx
+import { Globe, Share2 } from "lucide-react";
+import {
+  SiBandcamp,
+  SiDiscogs,
+  SiMusicbrainz,
+  SiSoundcloud,
+  SiSpotify,
+  SiWikidata,
+  SiWikipedia,
+  SiYoutube
+} from "react-icons/si";
+import { Chip } from "@behindthemusictree/ui";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var LINK_KINDS = {
+  official: { label: "Official website", Icon: Globe },
+  wikipedia: { label: "Wikipedia", Icon: SiWikipedia },
+  wikidata: { label: "Wikidata", Icon: SiWikidata },
+  spotify: { label: "Spotify", Icon: SiSpotify },
+  youtube: { label: "YouTube", Icon: SiYoutube },
+  bandcamp: { label: "Bandcamp", Icon: SiBandcamp },
+  soundcloud: { label: "SoundCloud", Icon: SiSoundcloud },
+  discogs: { label: "Discogs", Icon: SiDiscogs },
+  social: { label: "Social", Icon: Share2 }
+};
+function socialLabel(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return LINK_KINDS.social.label;
+  }
+}
+function artistLinks(artist) {
+  const links = artist.links.map(({ kind, url }) => ({
+    key: `${kind}-${url}`,
+    url,
+    Icon: LINK_KINDS[kind].Icon,
+    label: kind === "social" ? socialLabel(url) : LINK_KINDS[kind].label
+  }));
+  if (artist.musicbrainzArtistId) {
+    links.push({
+      key: "musicbrainz",
+      url: `https://musicbrainz.org/artist/${artist.musicbrainzArtistId}`,
+      Icon: SiMusicbrainz,
+      label: "MusicBrainz"
+    });
+  }
+  return links;
+}
+function ArtistLinks({ links }) {
+  return /* @__PURE__ */ jsx14("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ jsx14("li", { children: /* @__PURE__ */ jsx14(Chip, { href: url, icon: /* @__PURE__ */ jsx14(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+}
+
+// src/genre-tree/artist/formatYears.ts
+function formatYears(beginYear, endYear, ended) {
+  if (beginYear === null && endYear === null) return ended ? "ended" : null;
+  const end = endYear ?? (ended ? "?" : "present");
+  return `${beginYear ?? "?"}\u2013${end}`;
+}
+
+// src/genre-tree/artist/ArtistHeader.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
+function ArtistHeader({ artist }) {
+  const fields = [];
+  if (artist.type) fields.push({ label: "Type", value: artist.type.charAt(0).toUpperCase() + artist.type.slice(1) });
+  const country = artist.country && countryNames.of(artist.country);
+  if (country) 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__ */ jsx15(ArtistLinks, { links }) });
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsx15(FieldList, { items: fields });
+}
+
+// src/genre-tree/artist/ArtistPhoto.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function ExternalLink({ href, children }) {
+  return /* @__PURE__ */ jsx16("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+}
+function ArtistPhoto({ image, name }) {
+  return /* @__PURE__ */ jsxs10("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
+    /* @__PURE__ */ jsx16("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ jsxs10("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
+      "Photo: ",
+      /* @__PURE__ */ jsx16(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      ",",
+      " ",
+      image.licenseUrl ? /* @__PURE__ */ jsx16(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+    ] })
+  ] });
+}
+
+// src/genre-tree/artist/ArtistMembers.tsx
+import { PanelGroup, PanelSection } from "@behindthemusictree/ui";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function MembershipList({ title, memberships, renderArtistLink }) {
+  if (memberships.length === 0) return null;
+  return /* @__PURE__ */ jsx17(PanelGroup, { title, children: /* @__PURE__ */ jsx17("ul", { children: memberships.map((membership, index) => {
+    const details = [
+      formatYears(membership.beginYear, membership.endYear, membership.ended),
+      ...membership.roles
+    ];
+    const detailsText = details.filter(Boolean).join(" \xB7 ");
+    return (
+      // A member can have several periods in the same group.
+      /* @__PURE__ */ jsxs11("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ jsx17("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ jsxs11("span", { className: "text-[var(--color-text-muted)]", children: [
+          " \u2014 ",
+          detailsText
+        ] })
+      ] }, `${membership.artist.uuid}-${index}`)
+    );
+  }) }) });
+}
+function ArtistMembers({ title, memberships, renderArtistLink }) {
+  if (memberships.length === 0) return null;
+  const isCurrent = (membership) => !membership.ended && membership.endYear === null;
+  return /* @__PURE__ */ jsxs11(PanelSection, { title, children: [
+    /* @__PURE__ */ jsx17(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ jsx17(
+      MembershipList,
+      {
+        title: "Past",
+        memberships: memberships.filter((membership) => !isCurrent(membership)),
+        renderArtistLink
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/artist/ArtistDiscography.tsx
+import { PanelGroup as PanelGroup2, PanelSection as PanelSection2 } from "@behindthemusictree/ui";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
+var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
+function discographyGroup({ primaryType, secondaryTypes }) {
+  const secondary = secondaryTypes.map((type) => type.toLowerCase());
+  if (secondary.includes("live")) return "Live";
+  if (secondary.includes("compilation")) return "Compilations";
+  return PRIMARY_GROUPS[primaryType?.toLowerCase() ?? ""] ?? "Other";
+}
+function byYear(a, b) {
+  if (a.year !== b.year) {
+    if (a.year === null) return 1;
+    if (b.year === null) return -1;
+    return a.year.localeCompare(b.year);
+  }
+  return a.name.localeCompare(b.name);
+}
+function ArtistDiscography({ albums }) {
+  if (albums.length === 0) return null;
+  const sorted = [...albums].sort(byYear);
+  return /* @__PURE__ */ jsx18(PanelSection2, { title: "Discography", children: GROUPS.map((group) => {
+    const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
+    if (groupAlbums.length === 0) return null;
+    return /* @__PURE__ */ jsx18(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx18("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs12("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ jsx18("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ jsx18("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    ] }, album.uuid)) }) }, group);
+  }) });
+}
+
+// src/genre-tree/artist/ArtistSongs.tsx
+import { useState as useState3 } from "react";
+import { keepPreviousData } from "@tanstack/react-query";
+import { Play as Play2 } from "lucide-react";
+import { Pagination, PanelSection as PanelSection3, Skeleton as Skeleton3 } from "@behindthemusictree/ui";
+import { usePlayer as usePlayer7 } from "@behindthemusictree/app-kit/player";
+import {
+  SongDetailedSchema as SongDetailedSchema2,
+  libraryEndpoints as libraryEndpoints2,
+  songUnplayableReason as songUnplayableReason3,
+  useTrackList as useTrackList4
+} from "@behindthemusictree/app-kit/genre-tree";
+import { PaginatedResponseSchema as PaginatedResponseSchema2, useFetchWrapper as useFetchWrapper2, useQueryWithParse } from "@behindthemusictree/app-kit/transport";
+
+// src/genre-tree/track-list-sidebar/TrackItem.tsx
+import { usePlayer as usePlayer6 } from "@behindthemusictree/app-kit/player";
+import { useTrackList as useTrackList3 } from "@behindthemusictree/app-kit/genre-tree";
+
+// src/genre-tree/TrackPositionPlayPause.tsx
+import { FaPlay as FaPlay2, FaPause as FaPause2 } from "react-icons/fa";
+import { usePlayer as usePlayer5 } from "@behindthemusictree/app-kit/player";
+import { PlayStates as PlayStates2 } from "@behindthemusictree/app-kit/player";
+import { RingLoader as RingLoader2 } from "@behindthemusictree/ui";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function TrackPositionPlayPause({ position, uuid, handlePlayPauseClick }) {
+  const { playerTrackObject, playState } = usePlayer5();
+  const isThisTrack = playerTrackObject?.track.id === uuid;
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "track-position-play-pause flex items-center justify-center text-lg w-16 cursor-pointer",
+      style: { minWidth: "4rem", maxWidth: "4rem" },
+      onClick: handlePlayPauseClick,
+      children: [
+        /* @__PURE__ */ jsx19("div", { className: "group-hover:hidden", children: /* @__PURE__ */ jsx19("div", { children: isThisTrack && playState !== PlayStates2.STOPPED ? /* @__PURE__ */ jsxs13("div", { className: "flex space-x-1 items-end", children: [
+          /* @__PURE__ */ jsx19(
+            "div",
+            {
+              className: `w-playingbar bg-[var(--color-green-500)] h-3 origin-bottom ${playState === PlayStates2.PLAYING ? "animate-scale-pulse" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            "div",
+            {
+              className: `w-playingbar bg-[var(--color-green-500)] h-4 origin-bottom ${playState === PlayStates2.PLAYING ? "animate-scale-pulse delay-200" : ""}`,
+              style: { animationDelay: "0.2s" }
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            "div",
+            {
+              className: `w-playingbar bg-[var(--color-green-500)] h-3 origin-bottom ${playState === PlayStates2.PLAYING ? "animate-scale-pulse delay-400" : ""}`,
+              style: { animationDelay: "0.3s" }
+            }
+          )
+        ] }) : position }) }),
+        /* @__PURE__ */ jsx19("div", { className: "hidden group-hover:flex items-center justify-center", children: isThisTrack && playState === PlayStates2.LOADING ? /* @__PURE__ */ jsx19(RingLoader2, { size: 16 }) : isThisTrack && playState === PlayStates2.PLAYING ? /* @__PURE__ */ jsx19(FaPause2, {}) : /* @__PURE__ */ jsx19(FaPlay2, {}) })
+      ]
+    }
+  );
+}
+
+// src/genre-tree/track-list-sidebar/TrackItem.tsx
+import { isSong as isSong2, songUnplayableReason as songUnplayableReason2 } from "@behindthemusictree/app-kit/genre-tree";
+import { ArtistNames as ArtistNames2 } from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function TrackItem({
+  track,
+  position,
+  renderDuration,
+  renderActions,
+  renderArtistLink
+}) {
+  const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = usePlayer6();
+  const { trackList, toTrackAtPosition } = useTrackList3();
+  const scope = trackList?.origin?.scope ?? null;
+  const unplayableReason = isSong2(track) ? songUnplayableReason2(track) : null;
+  const handlePlayPauseClick = (event) => {
+    event.stopPropagation();
+    if (playerTrackObject && playerTrackObject.track.id === track.uuid) {
+      handlePlayPauseAction();
+    } else if (scope != null) {
+      toTrackAtPosition(position);
+      loadTrackForPlayer(track.uuid);
+    }
+  };
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: `track-item flex h-14 text-[var(--color-text)] ${unplayableReason ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
+      title: unplayableReason ?? void 0,
+      children: [
+        unplayableReason ? /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "flex items-center justify-center text-lg w-16",
+            style: { minWidth: "4rem", maxWidth: "4rem" },
+            "aria-disabled": "true",
+            children: position
+          }
+        ) : /* @__PURE__ */ jsx20(TrackPositionPlayPause, { position, uuid: track.uuid, handlePlayPauseClick }),
+        /* @__PURE__ */ jsxs14("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex max-w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx20("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: track.title }),
+            isSong2(track) && /* @__PURE__ */ jsx20(MusicBrainzRecordingLink, { song: track })
+          ] }),
+          track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx20("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx20(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : "",
+          unplayableReason && /* @__PURE__ */ jsx20("div", { className: "text-xs", children: /* @__PURE__ */ jsx20(UnplayableReason, { reason: unplayableReason }) })
+        ] }),
+        /* @__PURE__ */ jsx20("div", { className: "album-name items-start justify-center w-1/3 min-w-0 ml-2 max-w-full truncate text-[var(--color-text-muted)]", children: track.album ? track.album.name : "" }),
+        /* @__PURE__ */ jsx20("div", { className: "genre-name-container flex items-center justify-end w-1/6 min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx20("div", { className: "genre-name font-bold p-1 border border-[var(--color-text-muted)] text-xs max-w-full truncate", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "duration flex text-base w-16 items-center justify-center",
+            style: { minWidth: "4rem", maxWidth: "4rem" },
+            children: renderDuration(track)
+          }
+        ),
+        renderActions && /* @__PURE__ */ jsx20("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+      ]
+    }
+  );
+}
+
+// src/genre-tree/artist/ArtistSongs.tsx
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var SongPageSchema2 = PaginatedResponseSchema2(SongDetailedSchema2);
+var SORTS = [
+  { ordering: "title", label: "Title" },
+  { ordering: "-albumYear", label: "Year" }
+];
+function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
+  const [page, setPage] = useState3(1);
+  const [ordering, setOrdering] = useState3("title");
+  const { fetch } = useFetchWrapper2(getBackendBaseUrl);
+  const { playNewTrackListFromArtist } = useTrackList4();
+  const { playerTrackObject } = usePlayer7();
+  const { data, isPending, isError } = useQueryWithParse({
+    queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
+    queryFn: () => fetch(libraryEndpoints2.reference.songs.list(), true, false, void 0, {
+      artist: artist.uuid,
+      ordering,
+      page
+    }),
+    schema: SongPageSchema2,
+    placeholderData: keepPreviousData,
+    context: "ArtistSongs"
+  });
+  const play = (startSongUuid) => playNewTrackListFromArtist({ uuid: artist.uuid, name: artist.name }, "reference", {
+    ordering,
+    startSongUuid
+  });
+  const handleRowClickCapture = (event, song) => {
+    if (!(event.target instanceof Element) || !event.target.closest(".track-position-play-pause")) return;
+    if (playerTrackObject?.track.id === song.uuid || songUnplayableReason3(song) !== null) return;
+    event.stopPropagation();
+    void play(song.uuid);
+  };
+  return /* @__PURE__ */ jsx21(PanelSection3, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx21(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx21("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx21("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          type: "button",
+          onClick: () => void play(),
+          className: "flex w-fit items-center gap-1.5 px-3 py-1 text-xs font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
+          children: [
+            /* @__PURE__ */ jsx21(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            "Play all"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx21("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": ordering === sort.ordering,
+          onClick: () => {
+            setOrdering(sort.ordering);
+            setPage(1);
+          },
+          className: "px-2.5 py-0.5 text-[var(--color-text)] rounded-full hover:bg-[var(--color-surface-muted)] aria-pressed:bg-gray-900 aria-pressed:text-white",
+          children: sort.label
+        },
+        sort.ordering
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx21("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ jsx21("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ jsx21(
+      TrackItem,
+      {
+        track: song,
+        position: (page - 1) * data.pageSize + index + 1,
+        renderArtistLink
+      }
+    ) }, song.uuid)) }),
+    /* @__PURE__ */ jsx21(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+  ] }) });
+}
+
+// src/genre-tree/artist/useArtistPanel.tsx
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function useArtistPanel({
+  uuid,
+  getBackendBaseUrl,
+  renderArtistLink,
+  expanded,
+  onExpandedChange,
+  onClose
+}) {
+  const result = useArtist(uuid, getBackendBaseUrl);
+  const panel = { expanded, onExpandedChange, onClose };
+  switch (result.status) {
+    case "idle":
+      return void 0;
+    case "loading":
+      return {
+        ...panel,
+        title: "Artist",
+        content: /* @__PURE__ */ jsxs16("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ jsx22(Skeleton4, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx22(Skeleton4, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx22(Skeleton4, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx22(Skeleton4, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx22(Skeleton4, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ jsx22(Skeleton4, { className: "h-16" })
+        ] })
+      };
+    case "not-found":
+      return {
+        ...panel,
+        title: "Artist not found",
+        content: /* @__PURE__ */ jsx22("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+      };
+    case "error":
+      return {
+        ...panel,
+        title: "Artist",
+        content: /* @__PURE__ */ jsx22("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+      };
+    case "success": {
+      const { artist } = result;
+      return {
+        ...panel,
+        title: artist.name,
+        content: /* @__PURE__ */ jsxs16(Fragment5, { children: [
+          artist.image && /* @__PURE__ */ jsx22(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ jsx22(ArtistHeader, { artist }),
+          /* @__PURE__ */ jsx22(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ jsx22(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ jsx22(
+            ArtistSongs,
+            {
+              artist: { uuid: artist.uuid, name: artist.name },
+              getBackendBaseUrl,
+              renderArtistLink
+            }
+          )
+        ] }),
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx22(ArtistDiscography, { albums: artist.albums }) : void 0
+      };
+    }
+  }
+}
+
+// src/genre-tree/GenreTreeView.tsx
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var PREVIOUS_BUTTON_CSS = `
+.genre-tree-view .search-overlay .gtv-info-panel-previous { display: none; }
+.genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search input { padding-left: 2.75rem; }
+.genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search-previous { display: flex; }
+@keyframes genre-tree-view-previous-in { from { opacity: 0; transform: translate(-0.5rem, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
+@media (prefers-reduced-motion: no-preference) {
+  .genre-search-previous { animation: genre-tree-view-previous-in 200ms ease-out; }
+}
+`;
+function GenreNodeActionBand({ genrePlaylist, scope, playback, ...bandProps }) {
+  const { isPlaying, setIsPlaying } = usePlayer8();
+  const isCurrentTrackList = playback.playingNodeId === genrePlaylist.uuid;
+  const handlePlayPause = () => {
+    if (isCurrentTrackList) {
+      setIsPlaying(!isPlaying);
+      return;
+    }
+    playback.play(genrePlaylist).catch((error) => {
+      console.error("Failed to load genre playlist tracks:", error);
+    });
+  };
+  return /* @__PURE__ */ jsx23(
+    GenreActionBand,
+    {
+      ...bandProps,
+      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
+      isPlaying: isCurrentTrackList && isPlaying
+    }
+  );
+}
+var NO_POP_ROOT_TITLE = "This genre tree has no 'Mainstream Pop' root yet";
+var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)] [&_.gtv-info-panel--overlay]:[--gtv-info-panel-header-inset:0px]";
+function GenreTreeView({
+  scope,
+  handleGenreCreationAction,
+  handleGenreRenameAction,
+  getBackendBaseUrl,
+  additionalActions,
+  viewMode: controlledViewMode,
+  selectedNodeId: controlledSelectedNodeId,
+  onSelectedNodeIdChange,
+  defaultViewport,
+  onViewportChange,
+  readOnly = false,
+  className,
+  showDisplayOptions = true,
+  showAddRoot = true,
+  allowWheelRotation: controlledAllowWheelRotation,
+  criteriaOverviewSchema,
+  renderGenreDetailExtras,
+  controlsOrientation = "horizontal",
+  renderArtistLink,
+  artistUuid: controlledArtistUuid,
+  onArtistUuidChange,
+  artistExpanded: controlledArtistExpanded,
+  onArtistExpandedChange,
+  artistSearch = true,
+  onArtistSelect,
+  artistSearchBaseUrl,
+  renderSummary,
+  renderEssentialTracks,
+  renderSongLeading,
+  renderSongActions,
+  renderTracksToolbar,
+  editMode,
+  onEditModeChange,
+  renderTitleEditor,
+  renderParentsEditor,
+  renderDangerZone,
+  expanded,
+  onExpandedChange,
+  collapsed,
+  onCollapsedChange,
+  overlayPanel,
+  placement = "default",
+  ...focus
+}) {
+  const [internalArtistUuid, setInternalArtistUuid] = useState4(null);
+  const isArtistControlled = controlledArtistUuid !== void 0;
+  const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
+  const changeArtist = (uuid) => {
+    if (!isArtistControlled) setInternalArtistUuid(uuid);
+    onArtistUuidChange?.(uuid);
+  };
+  const {
+    isLoading,
+    genrePlaylistByNodeId,
+    visibleGenrePlaylists,
+    groupedGenrePlaylistsByRoot,
+    selectedNodeId,
+    selectedGenrePlaylist,
+    selectNode,
+    selectGenrePlaylist,
+    clearSelection,
+    viewMode,
+    isViewModeControlled: isControlled,
+    setViewMode,
+    canShowPopCore,
+    allowWheelRotation: internalAllowWheelRotation,
+    toggleWheelRotation,
+    onNodeHover: handleNodeHover
+  } = useGenreTreeViewState({
+    scope,
+    getBackendBaseUrl,
+    viewMode: controlledViewMode,
+    selectedNodeId: controlledSelectedNodeId,
+    onSelectedNodeIdChange,
+    criteriaOverviewSchema,
+    artistUuid
+  });
+  const artistResult = useArtist2(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
+  const filterArtist = useMemo6(
+    () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
+    [artistUuid, filterArtistName]
+  );
+  const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: visibleGenrePlaylists, artist: filterArtist });
+  const openArtist = (uuid) => {
+    if (selectedNodeId !== null) clearSelection();
+    changeArtist(uuid);
+  };
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState4(null);
+  const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
+  const artistPanel = useArtistPanel({
+    uuid: artistUuid,
+    getBackendBaseUrl: artistBaseUrl,
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx23("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
+    onExpandedChange: (on) => {
+      if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
+      onArtistExpandedChange?.(on);
+    },
+    onClose: () => changeArtist(null)
+  });
+  const builtInArtistPanel = overlayPanel || selectedNodeId !== null ? void 0 : artistPanel;
+  const activeOverlayPanel = overlayPanel ?? (builtInArtistPanel && { ...builtInArtistPanel, hideTitle: true, hideClose: true });
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState4(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState4(false);
+  const isCollapsed = collapsed ?? uncontrolledCollapsed;
+  const isExpanded = expanded ?? uncontrolledExpanded;
+  const changeCollapsed = (next) => {
+    setUncontrolledCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  const changeExpanded = (next) => {
+    setUncontrolledExpanded(next);
+    onExpandedChange?.(next);
+  };
+  useEffect4(() => {
+    setUncontrolledCollapsed(false);
+  }, [selectedNodeId, artistUuid]);
+  const isDetailHidden = isCollapsed || !selectedNodeId && !activeOverlayPanel;
+  useEffect4(() => {
+    if (placement !== "regions" || !isDetailHidden) return void 0;
+    const root = document.documentElement;
+    root.style.setProperty("--layout-left-w", "0px");
+    return () => {
+      root.style.removeProperty("--layout-left-w");
+    };
+  }, [placement, isDetailHidden]);
+  const detailOverlay = placement === "regions" && activeOverlayPanel?.onExpandedChange ? activeOverlayPanel : void 0;
+  const detailExpanded = detailOverlay ? !!detailOverlay.expanded : isExpanded;
+  const onDetailExpandedChange = detailOverlay ? detailOverlay.onExpandedChange : changeExpanded;
+  const infoPanelCuration = {
+    editMode,
+    onEditModeChange,
+    renderTitleEditor,
+    renderParentsEditor,
+    renderDangerZone,
+    expanded: placement === "regions" ? isExpanded : expanded,
+    onExpandedChange: placement === "regions" ? changeExpanded : onExpandedChange,
+    collapsed: placement === "regions" ? isCollapsed : void 0,
+    hideExpandButton: placement === "regions" ? true : void 0,
+    overlayPanel: detailOverlay ? { ...detailOverlay, collapsed: isCollapsed, hideExpandButton: true } : activeOverlayPanel
+  };
+  const [isWheelRevealed, setIsWheelRevealed] = useState4(false);
+  const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
+  const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
+  const rootRef = useRef4(null);
+  const handlePrevious = () => {
+    rootRef.current?.querySelector(".search-overlay .gtv-info-panel-previous")?.click();
+  };
+  const { showPopup, hidePopup } = usePopup4();
+  const [searchText, setSearchText] = useState4("");
+  const artistSearchResult = useArtistSearch(artistBaseUrl, artistSearch ? searchText : "");
+  const artistExtraResults = artistSearch ? {
+    label: "Artists",
+    items: artistSearchResult.artists.map((artist) => ({
+      key: artist.uuid,
+      content: /* @__PURE__ */ jsxs17(Fragment6, { children: [
+        /* @__PURE__ */ jsxs17("span", { className: "block truncate font-medium", children: [
+          artist.name,
+          artist.disambiguation && /* @__PURE__ */ jsxs17("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+            " \xB7 ",
+            artist.disambiguation
+          ] })
+        ] }),
+        artist.matchedAlias && /* @__PURE__ */ jsxs17("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+          "also known as ",
+          artist.matchedAlias
+        ] })
+      ] }),
+      onSelect: () => {
+        openArtist(artist.uuid);
+        onArtistSelect?.(artist);
+      }
+    })),
+    status: artistSearchResult.isError ? "Search failed" : artistSearchResult.settled && artistSearchResult.artists.length === 0 ? "No artists found" : ""
+  } : void 0;
+  const handleSelectedNodeChange = (node) => {
+    selectNode(node);
+  };
+  const handleGenreSearchClear = clearSelection;
+  const handleGenreSearchSelect = (genrePlaylist) => {
+    selectGenrePlaylist(genrePlaylist);
+  };
+  const selectedUuid = selectedGenrePlaylist?.uuid;
+  const selectedChildren = selectedUuid ? visibleGenrePlaylists.filter((genrePlaylist) => genrePlaylist.parent?.uuid === selectedUuid) : [];
+  const canZoomIn = viewMode === "pop-core" && focus.onFocusGenreChange !== void 0 && selectedUuid !== void 0 && focus.focusGenreUuid !== selectedUuid && selectedChildren.length > 0 && selectedChildren.filter((child) => child.criteria?.side === "pop").length <= 1;
+  const handleGenreSearchZoomIn = () => {
+    if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
+  };
+  const zoomInRef = useRef4(void 0);
+  zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
+  const renderInfoPanelBody = useCallback5(
+    (node, { toolbar, ancestors, family }) => {
+      const genrePlaylist = genrePlaylistByNodeId.get(node.id);
+      const criteria = genrePlaylist?.criteria;
+      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ jsxs17(Fragment6, { children: [
+        toolbar,
+        family
+      ] }), aside: ancestors };
+      const genreUuid = criteria.uuid;
+      return {
+        primary: /* @__PURE__ */ jsxs17(Fragment6, { children: [
+          toolbar,
+          /* @__PURE__ */ jsx23(
+            GenreNodeActionBand,
+            {
+              node,
+              genrePlaylist,
+              scope,
+              onZoomIn: zoomInRef.current,
+              onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
+              onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
+              onChangeParent: readOnly ? void 0 : () => showPopup(
+                /* @__PURE__ */ jsx23(
+                  ChangeParentPopup,
+                  {
+                    genrePlaylist: { ...genrePlaylist, criteria },
+                    genrePlaylists: visibleGenrePlaylists,
+                    scope,
+                    getBackendBaseUrl,
+                    onClose: hidePopup
+                  }
+                )
+              ),
+              additionalActions,
+              playback
+            }
+          ),
+          /* @__PURE__ */ jsx23(
+            GenreDetailExtras,
+            {
+              family,
+              genreUuid,
+              genrePlaylist,
+              scope,
+              getBackendBaseUrl,
+              criteriaOverviewSchema,
+              renderGenreDetailExtras,
+              renderArtistLink,
+              artist: filterArtist,
+              renderSummary,
+              renderEssentialTracks,
+              renderSongLeading,
+              renderSongActions,
+              renderTracksToolbar
+            },
+            genreUuid
+          )
+        ] }),
+        aside: ancestors
+      };
+    },
+    [
+      genrePlaylistByNodeId,
+      additionalActions,
+      readOnly,
+      handleGenreCreationAction,
+      handleGenreRenameAction,
+      showPopup,
+      hidePopup,
+      visibleGenrePlaylists,
+      playback,
+      filterArtist,
+      scope,
+      getBackendBaseUrl,
+      criteriaOverviewSchema,
+      renderGenreDetailExtras,
+      renderArtistLink,
+      renderSummary,
+      renderEssentialTracks,
+      renderSongLeading,
+      renderSongActions,
+      renderTracksToolbar
+    ]
+  );
+  const isRotationControlled = controlledAllowWheelRotation !== void 0;
+  const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
+  const detailTab = placement === "regions" && (selectedNodeId || detailOverlay) ? /* @__PURE__ */ jsx23(
+    PanelEdgeTab,
+    {
+      side: "left",
+      edge: detailExpanded ? { label: "Shrink panel", onClick: () => onDetailExpandedChange?.(false) } : isCollapsed ? null : { label: "Hide panel", onClick: () => changeCollapsed(true) },
+      center: detailExpanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : onDetailExpandedChange ? { label: "Extend panel", onClick: () => onDetailExpandedChange(true) } : null
+    }
+  ) : null;
+  const actions = /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    !isLoading && /* @__PURE__ */ jsx23(
+      GenreSearch,
+      {
+        genrePlaylists: visibleGenrePlaylists,
+        onSelect: handleGenreSearchSelect,
+        selectedName: selectedGenrePlaylist?.name ?? builtInArtistPanel?.title ?? null,
+        onClear: builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
+        onPrevious: handlePrevious,
+        onQueryChange: artistSearch ? setSearchText : void 0,
+        extraResults: artistExtraResults
+      }
+    ),
+    !isLoading && filterArtist && /* @__PURE__ */ jsxs17("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ jsx23(
+        "button",
+        {
+          type: "button",
+          className: "py-1 pl-3 pr-2 hover:underline",
+          "aria-label": `Show artist ${filterArtist.name}`,
+          onClick: () => {
+            if (selectedNodeId !== null) clearSelection();
+          },
+          children: filterArtist.name
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        "button",
+        {
+          type: "button",
+          className: "py-1 pl-1 pr-3 hover:text-[var(--color-text)]",
+          "aria-label": `Clear artist filter ${filterArtist.name}`,
+          onClick: () => changeArtist(null),
+          children: "\xD7"
+        }
+      )
+    ] }),
+    !isLoading && !isControlled && /* @__PURE__ */ jsx23(
+      SegmentedControl,
+      {
+        "aria-label": "Tree view mode",
+        value: viewMode,
+        onChange: setViewMode,
+        options: [
+          { value: "pop-core", label: "Pop/Core", disabled: !canShowPopCore, title: canShowPopCore ? void 0 : NO_POP_ROOT_TITLE },
+          { value: "wheel", label: "Wheel" },
+          { value: "stacked", label: "Stacked" },
+          { value: "outline", label: "Outline", disabled: !canShowPopCore, title: canShowPopCore ? void 0 : NO_POP_ROOT_TITLE }
+        ]
+      }
+    ),
+    !isLoading && showDisplayOptions && /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: "flex items-center gap-1",
+        role: "group",
+        "aria-label": "Tree display options",
+        children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx23(
+          Button,
+          {
+            variant: allowWheelRotation ? "default" : "outline",
+            size: "sm",
+            onClick: toggleWheelRotation,
+            children: "Rotation"
+          }
+        )
+      }
+    ),
+    !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx23(
+      IconTextButton,
+      {
+        icon: Plus2,
+        text: "Add root",
+        onClick: () => handleGenreCreationAction(null)
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      ref: rootRef,
+      className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx23("style", { children: PREVIOUS_BUTTON_CSS }),
+        /* @__PURE__ */ jsx23(
+          "div",
+          {
+            className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "left-5 top-5"}`,
+            children: actions
+          }
+        ),
+        detailTab && /* @__PURE__ */ jsx23(
+          "div",
+          {
+            className: `absolute top-1/2 z-30 -translate-y-1/2 transition-[opacity,visibility] duration-150 ease-out ${isTreeReady ? "opacity-100" : "pointer-events-none invisible opacity-0"} ${detailExpanded ? "right-[calc(var(--layout-center-right)-var(--layout-edge-tab-w))]" : isCollapsed ? "left-0" : "left-[calc(var(--layout-gutter)+var(--layout-left-w))]"}`,
+            children: detailTab
+          }
+        ),
+        /* @__PURE__ */ jsx23("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsx23("div", { className: "tree-view-container flex-1 min-w-0 flex flex-col h-full", children: isLoading ? /* @__PURE__ */ jsx23(GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+          // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
+          // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
+          // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
+          // The panel's own Zoom in button is hidden: the search bar carries it.
+          /* @__PURE__ */ jsx23("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ jsx23(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx23(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx23(
+            GenrePlaylistTreeWheel,
+            {
+              scope,
+              genrePlaylists: visibleGenrePlaylists,
+              handleGenreCreationAction,
+              handleGenreRenameAction,
+              additionalActions,
+              onSelectedNodeChange: handleSelectedNodeChange,
+              hideInfoPanelClose: true,
+              hideInfoPanelTitle: true,
+              onNodeHover: handleNodeHover,
+              renderInfoPanelBody,
+              playback,
+              selectedNodeId,
+              readOnly,
+              allowWheelRotation,
+              controlsOrientation,
+              defaultViewport,
+              onViewportChange,
+              ...infoPanelCuration
+            }
+          ) }) })
+        ) : viewMode === "pop-core" ? (
+          // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
+          /* @__PURE__ */ jsx23("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ jsx23(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx23(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx23(
+            GenrePlaylistTreeWheelRadialPopCore,
+            {
+              scope,
+              genrePlaylists: visibleGenrePlaylists,
+              handleGenreCreationAction,
+              handleGenreRenameAction,
+              additionalActions,
+              onSelectedNodeChange: handleSelectedNodeChange,
+              hideInfoPanelClose: true,
+              hideInfoPanelTitle: true,
+              onNodeHover: handleNodeHover,
+              renderInfoPanelBody,
+              playback,
+              selectedNodeId,
+              readOnly,
+              allowWheelRotation,
+              controlsOrientation,
+              defaultViewport,
+              onViewportChange,
+              ...infoPanelCuration,
+              ...focus
+            }
+          ) }) })
+        ) : viewMode === "outline" ? /* @__PURE__ */ jsx23("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ jsx23(
+          GenrePlaylistTreeWheelRadialPopCore,
+          {
+            outline: true,
+            scope,
+            genrePlaylists: visibleGenrePlaylists,
+            handleGenreCreationAction,
+            handleGenreRenameAction,
+            additionalActions,
+            onSelectedNodeChange: handleSelectedNodeChange,
+            hideInfoPanelClose: true,
+            hideInfoPanelTitle: true,
+            onNodeHover: handleNodeHover,
+            renderInfoPanelBody,
+            playback,
+            selectedNodeId,
+            readOnly,
+            ...infoPanelCuration
+          }
+        ) }) : /* @__PURE__ */ jsx23("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+          ([uuid, genrePlaylistTreePerRoot], rootIndex) => {
+            return /* @__PURE__ */ jsx23(
+              "div",
+              {
+                className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
+                children: /* @__PURE__ */ jsx23("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx23(
+                  GenrePlaylistTreePerRoot,
+                  {
+                    scope,
+                    rootUuid: uuid,
+                    genrePlaylistTreePerRoot,
+                    handleGenreCreationAction,
+                    handleGenreRenameAction,
+                    additionalActions,
+                    onSelectedNodeChange: handleSelectedNodeChange,
+                    hideInfoPanelClose: true,
+                    hideInfoPanelTitle: true,
+                    onNodeHover: handleNodeHover,
+                    renderInfoPanelBody,
+                    playback,
+                    selectedNodeId: uuid === selectedGenrePlaylist?.root.uuid ? selectedNodeId : null,
+                    readOnly,
+                    wheelZoom: "modifier",
+                    controlsOrientation,
+                    defaultViewport: uuid === selectedGenrePlaylist?.root.uuid ? defaultViewport : void 0,
+                    onViewportChange: uuid === selectedGenrePlaylist?.root.uuid ? onViewportChange : void 0,
+                    ...infoPanelCuration,
+                    overlayPanel: rootIndex === 0 ? activeOverlayPanel : void 0
+                  }
+                ) })
+              },
+              uuid
+            );
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+
+// src/genre-tree/index.ts
+import {
+  GenreTreeSkeleton,
+  GenreTreeWheelSkeleton as GenreTreeWheelSkeleton2,
+  GenreTreeViewSkeleton as GenreTreeViewSkeleton2,
+  GenreTreeOutlineSkeleton
+} from "@behindthemusictree/genre-tree-view";
+
+// src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+import { useTrackList as useTrackList5 } from "@behindthemusictree/app-kit/genre-tree";
+import { useTrackListSidebarVisibility } from "@behindthemusictree/app-kit/genre-tree";
+import { TrackListOriginType as TrackListOriginType2 } from "@behindthemusictree/app-kit/genre-tree";
+import { useTrackNoun as useTrackNoun6 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+function TrackListSidebar({
+  className = "",
+  renderDuration,
+  renderActions,
+  layout = "fixed",
+  renderArtistLink
+}) {
+  const { trackList, loadMore } = useTrackList5();
+  const trackNoun = useTrackNoun6();
+  const loadMoreSentinelRef = useRef5(null);
+  const hasMore = !!trackList && trackList.nextPage !== null;
+  useEffect5(() => {
+    const sentinel = loadMoreSentinelRef.current;
+    if (!hasMore || !sentinel) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        loadMore().catch((error) => console.error("Failed to load more tracks:", error));
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, loadMore]);
+  const { hideTrackListSidebar } = useTrackListSidebarVisibility();
+  const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem]";
+  return trackList ? /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      "data-theme": "dark",
+      className: `track-list-sidebar ${positionClasses} rounded-2xl bg-[var(--color-surface)] pb-1 ${className}`,
+      style: layout === "fixed" ? {
+        bottom: "79px"
+        /* Match player height exactly */
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs18("div", { className: "header flex h-16 px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "origin flex text-xl ", children: [
+            /* @__PURE__ */ jsx24("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+            /* @__PURE__ */ jsx24("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__ */ jsx24("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+          ] }),
+          /* @__PURE__ */ jsxs18("div", { className: "info flex flex-col justify-center items-center pt-1 mr-2 text-[var(--color-text-muted)]", children: [
+            trackList.origin.type === TrackListOriginType2.GENRE_PLAYLIST ? "\u2022 Genre playlist \u2022 " : trackList.origin.type === TrackListOriginType2.ARTIST ? "\u2022 Artist \u2022 " : `\u2022 ${trackNoun.singular} playlist \u2022 `,
+            `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular} \u2022`
+          ] }),
+          /* @__PURE__ */ jsx24(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close track list",
+              className: "flex-grow flex flex-col items-end justify-center h-full p-3 cursor-pointer text-inherit",
+              onClick: hideTrackListSidebar,
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs18(
+          "ul",
+          {
+            className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list overflow-auto max-h-[calc(100vh-63.5px-79px-56px-3.5px)] list-none p-0 m-0",
+            children: [
+              trackList.tracks.map((track, index) => /* @__PURE__ */ jsx24("li", { children: /* @__PURE__ */ jsx24(
+                TrackItem,
+                {
+                  track,
+                  position: index + 1,
+                  renderDuration,
+                  renderActions,
+                  renderArtistLink
+                }
+              ) }, track.uuid)),
+              hasMore && /* @__PURE__ */ jsx24("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+
+// src/genre-tree/PlayerPanel.tsx
+import { useState as useState5 } from "react";
+import { X as X2 } from "lucide-react";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import {
+  usePlayer as usePlayer9,
+  PlayerVideoSurface
+} from "@behindthemusictree/app-kit/player";
+import {
+  useTrackListSidebarVisibility as useTrackListSidebarVisibility2
+} from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var PANEL_ID = "player-panel";
+var iconButtonClassName = "flex h-6 w-6 shrink-0 items-center justify-center p-0 rounded-md hover:bg-white/10";
+var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
+function PlayerPanel({
+  className,
+  isVisible = true,
+  onClose,
+  expanded,
+  onExpandedChange,
+  extendedWidth = DEFAULT_EXTENDED_WIDTH,
+  renderArtistLink
+}) {
+  const { playerTrackObject } = usePlayer9();
+  const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility2();
+  const [uncontrolledExtended, setUncontrolledExtended] = useState5(false);
+  const isExtendRequested = expanded ?? uncontrolledExtended;
+  const setIsExtendRequested = (next) => {
+    setUncontrolledExtended(next);
+    onExpandedChange?.(next);
+  };
+  const isExtended = isExtendRequested && isTrackListSidebarVisible;
+  const tabEdge = !isTrackListSidebarVisible ? null : isExtended ? {
+    label: "Shrink song list panel",
+    onClick: () => setIsExtendRequested(false)
+  } : { label: "Hide song list", onClick: toggleTrackListSidebar };
+  const tabCenter = !isTrackListSidebarVisible ? { label: "Show song list", onClick: toggleTrackListSidebar } : isExtended ? null : {
+    label: "Extend song list panel",
+    onClick: () => setIsExtendRequested(true)
+  };
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      id: PANEL_ID,
+      className: twMerge2(
+        "fixed right-[var(--layout-gutter)] top-[var(--layout-band-top)] z-40 max-h-[calc(100vh-var(--layout-band-top)-3.5rem)]",
+        !isExtended && "w-[var(--layout-right-w)]",
+        isTrackListSidebarVisible && "h-[calc(100vh-var(--layout-band-top)-3.5rem)]",
+        !isVisible && "hidden",
+        className
+      ),
+      style: isExtended ? { width: extendedWidth } : void 0,
+      children: [
+        /* @__PURE__ */ jsx25(
+          PanelEdgeTab,
+          {
+            side: "right",
+            edge: tabEdge,
+            center: tabCenter,
+            controls: PANEL_ID,
+            className: "absolute right-full top-1/2 -translate-y-1/2"
+          }
+        ),
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            className: twMerge2(
+              "flex h-full max-h-[inherit] overflow-hidden rounded-[var(--radius-panel,1rem)] bg-zinc-950 text-zinc-100 shadow-[0_1px_2px_rgba(0,0,0,0.5),0_2px_6px_2px_rgba(0,0,0,0.3)]",
+              isExtended ? "flex-row" : "flex-col"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs19("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
+                  /* @__PURE__ */ jsx25("span", { className: "min-w-0 truncate text-sm font-semibold", children: playerTrackObject?.track?.title }),
+                  /* @__PURE__ */ jsx25("div", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ jsx25(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      className: iconButtonClassName,
+                      "aria-label": "Close player",
+                      children: /* @__PURE__ */ jsx25(X2, { size: 16 })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs19("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ jsx25(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ jsx25("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+                ] })
+              ] }),
+              isTrackListSidebarVisible && /* @__PURE__ */ jsx25(
+                TrackListSidebar,
+                {
+                  layout: "inline",
+                  className: twMerge2(
+                    "min-h-0 min-w-0 flex-1",
+                    isExtended && "border-l border-zinc-800"
+                  ),
+                  renderArtistLink
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/genre-tree/Rating.tsx
+import { v4 as uuidv4 } from "uuid";
+import { AiFillStar, AiOutlineStar } from "react-icons/ai";
+import { FORM_RATING_NULL_VALUE } from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+function Rating({ rating, handleChange }) {
+  const instanceId = uuidv4();
+  return /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs20("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ jsx26(
+      "input",
+      {
+        id: `star-${instanceId}-${i}`,
+        className: "w-6 h-6 opacity-0",
+        type: "radio",
+        name: "rating",
+        value: i === 0 ? FORM_RATING_NULL_VALUE : i,
+        checked: rating === (i === 0 ? null : i),
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx26("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs20("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx26(
+        AiOutlineStar,
+        {
+          className: `w-7 h-7 absolute top-0 left-0 ${rating === FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
+        }
+      ),
+      /* @__PURE__ */ jsx26("span", { className: "flex-grow w-8" }),
+      " "
+    ] }) : /* @__PURE__ */ jsx26(
+      AiFillStar,
+      {
+        className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
+      }
+    ) })
+  ] }, i)) });
+}
+
+export {
+  GenrePlaylistTreePerRoot,
+  GenreSearch,
+  PanelEdgeTab,
+  TrackPositionPlayPause,
+  TrackItem,
+  GenreTreeView,
+  TrackListSidebar,
+  PlayerPanel,
+  Rating,
+  GenreTreeSkeleton,
+  GenreTreeWheelSkeleton2 as GenreTreeWheelSkeleton,
+  GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
+  GenreTreeOutlineSkeleton
+};
+//# sourceMappingURL=chunk-BPCFNBFO.js.map