@behindthemusictree/app-kit-ui 24.0.1 → 26.1.0

package/dist/genre-tree/index.cjs

@@ -38,8 +38,9 @@ module.exports = __toCommonJS(genre_tree_exports);
 
 // src/genre-tree/GenreTreeView.tsx
 var import_react10 = require("react");
+var import_react_query3 = require("@tanstack/react-query");
 var import_lucide_react8 = require("lucide-react");
-var import_ui13 = require("@behindthemusictree/ui");
+var import_ui14 = require("@behindthemusictree/ui");
 var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
 var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
@@ -668,6 +669,11 @@ var import_genre_tree_view2 = require("@behindthemusictree/genre-tree-view");
 var import_player4 = require("@behindthemusictree/app-kit/player");
 var import_popup3 = require("@behindthemusictree/app-kit/popup");
 var import_transport6 = require("@behindthemusictree/app-kit/transport");
+
+// src/genre-tree/playlist-tree/size-metric.ts
+var genrePlaylistSize = (genrePlaylist, metric) => metric === "views" ? genrePlaylist.viewsCount : genrePlaylist.tracksCount;
+
+// src/genre-tree/playlist-tree/TreeWheel.tsx
 var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheel({
@@ -688,6 +694,9 @@ function GenrePlaylistTreeWheel({
   allowWheelRotation,
   showToolbar,
   controlsOrientation,
+  sizeMetric = "songs",
+  floatingControlsLeading,
+  busy,
   defaultViewport,
   onViewportChange,
   playback,
@@ -703,12 +712,12 @@ function GenrePlaylistTreeWheel({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
       name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
+      itemCount: genrePlaylistSize(genrePlaylist, sizeMetric),
       actionable: Boolean(genrePlaylist.criteria),
       side: genrePlaylist.criteria?.side ?? void 0,
       wikidataId: genrePlaylist.criteria?.wikidataId ?? null
     })),
-    [genrePlaylists]
+    [genrePlaylists, sizeMetric]
   );
   const handlePlayPause = (0, import_react5.useCallback)(
     (nodeId) => {
@@ -760,7 +769,7 @@ function GenrePlaylistTreeWheel({
     {
       className,
       nodes,
-      itemCountLabel: `${(0, import_track_noun4.capitalize)(trackNoun.singular)} count`,
+      itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun4.capitalize)(trackNoun.singular)} count`,
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
       onPlayPause: handlePlayPause,
@@ -778,6 +787,8 @@ function GenrePlaylistTreeWheel({
       allowWheelRotation,
       showToolbar,
       controlsOrientation,
+      floatingControlsLeading,
+      busy,
       defaultViewport,
       onViewportChange,
       ...infoPanelCuration,
@@ -811,6 +822,9 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     allowWheelRotation,
     showToolbar,
     controlsOrientation,
+    sizeMetric = "songs",
+    floatingControlsLeading,
+    busy,
     outline = false,
     defaultViewport,
     onViewportChange,
@@ -818,10 +832,6 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
   } = 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,
@@ -838,14 +848,15 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
       name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
+      itemCount: genrePlaylistSize(genrePlaylist, sizeMetric),
       actionable: Boolean(genrePlaylist.criteria),
       detached: !genrePlaylist.criteria,
       side: genrePlaylist.criteria?.side ?? void 0,
       wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
-      umbrella: genrePlaylist.isUmbrella
+      umbrella: genrePlaylist.isUmbrella,
+      scene: genrePlaylist.scene ?? void 0
     })),
-    [genrePlaylists]
+    [genrePlaylists, sizeMetric]
   );
   const handlePlayPause = (0, import_react6.useCallback)(
     (nodeId) => {
@@ -887,7 +898,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
   const treeProps = {
     className,
     nodes,
-    itemCountLabel: `${(0, import_track_noun5.capitalize)(trackNoun.singular)} count`,
+    itemCountLabel: sizeMetric === "views" ? "Views" : `${(0, import_track_noun5.capitalize)(trackNoun.singular)} count`,
     playingNodeId,
     playState: isPlaying ? "playing" : "paused",
     onPlayPause: handlePlayPause,
@@ -912,6 +923,8 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
       ...treeProps,
       allowWheelRotation,
       controlsOrientation,
+      floatingControlsLeading,
+      busy,
       defaultViewport,
       onViewportChange,
       ...focus.onFocusGenreChange ? { focusNodeId: focus.focusGenreUuid, onFocusChange: focus.onFocusGenreChange } : { focusNodeId: void 0, onFocusChange: void 0 }
@@ -977,6 +990,7 @@ function GenreSearch({
   });
   const extraItems = query !== "" && query !== selectedName ? extraResults?.items ?? [] : [];
   const label = extraResults ? "Search" : "Search a genre";
+  const loading = query !== "" && query !== selectedName && (extraResults?.loading ?? false);
   const showList = results.length > 0 || extraItems.length > 0;
   const heading = "px-3 pt-2 pb-1 text-xs font-medium uppercase text-[var(--color-text-muted)]";
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "genre-search relative w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0", children: [
@@ -1002,11 +1016,34 @@ function GenreSearch({
         },
         placeholder: placeholder ?? `${label}\u2026`,
         "aria-label": label,
+        "aria-busy": loading,
         className: "h-[var(--layout-search-h,3rem)] pl-6 pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "p-2 text-[var(--color-text-muted)] pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Search, { "aria-hidden": "true", className: "w-6 h-6" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "span",
+        {
+          "data-loading": loading,
+          className: "relative p-2 text-[var(--color-text-muted)] pointer-events-none",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_lucide_react3.Search,
+              {
+                "aria-hidden": "true",
+                className: `w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-0" : ""}`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_lucide_react3.LoaderCircle,
+              {
+                "aria-hidden": "true",
+                className: `absolute inset-2 w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-100 delay-300 animate-spin motion-reduce:animate-none" : "opacity-0"}`
+              }
+            )
+          ]
+        }
+      ),
       canClear && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
@@ -1189,13 +1226,28 @@ function ChangeParentPopup({
   genrePlaylists,
   scope,
   getBackendBaseUrl,
-  onClose
+  onClose,
+  onParentChanged
 }) {
   const { mutate, isPending, formErrors } = (0, import_genre_tree11.useUpdateGenre)(scope, getBackendBaseUrl);
   const candidates = (0, import_react8.useMemo)(
     () => (0, import_genre_tree11.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
+  const handleSelect = (newParent) => {
+    const genre = genrePlaylist.criteria.uuid;
+    const parentPlaylistUuid = genrePlaylist.parent?.uuid;
+    const from = parentPlaylistUuid ? genrePlaylists.find(({ uuid }) => uuid === parentPlaylistUuid)?.criteria?.uuid ?? null : null;
+    mutate(
+      { uuid: genre, data: { parent: newParent.criteria.uuid } },
+      {
+        onSuccess: () => {
+          onClose();
+          onParentChanged?.({ genre, from, to: newParent.criteria.uuid });
+        }
+      }
+    );
+  };
   (0, import_react8.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1212,7 +1264,7 @@ function ChangeParentPopup({
       GenreSearch,
       {
         genrePlaylists: candidates,
-        onSelect: (newParent) => mutate({ uuid: genrePlaylist.criteria.uuid, data: { parent: newParent.criteria.uuid } }, { onSuccess: onClose }),
+        onSelect: handleSelect,
         placeholder: "Search a new parent\u2026"
       }
     ) }),
@@ -1643,8 +1695,30 @@ function useArtistPanel({
   }
 }
 
-// src/genre-tree/GenreTreeView.tsx
+// src/genre-tree/SizeMetricToggle.tsx
+var import_md = require("react-icons/md");
+var import_ui13 = require("@behindthemusictree/ui");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+function SizeMetricToggle({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_ui13.SegmentedControl,
+    {
+      "aria-label": "Size nodes by",
+      value,
+      onChange,
+      options: [
+        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_md.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_md.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+      ]
+    }
+  );
+}
+
+// src/genre-tree/GenreTreeView.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var PREVIOUS_BUTTON_CSS = `
 .genre-tree-view .search-overlay .gtv-info-panel-previous { display: none; }
 .genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search input { padding-left: 2.75rem; }
@@ -1666,7 +1740,7 @@ function GenreNodeActionBand({ genrePlaylist, scope, playback, ...bandProps }) {
       console.error("Failed to load genre playlist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     GenreActionBand,
     {
       ...bandProps,
@@ -1681,6 +1755,7 @@ function GenreTreeView({
   scope,
   handleGenreCreationAction,
   handleGenreRenameAction,
+  onParentChanged,
   getBackendBaseUrl,
   additionalActions,
   viewMode: controlledViewMode,
@@ -1696,6 +1771,8 @@ function GenreTreeView({
   criteriaOverviewSchema,
   renderGenreDetailExtras,
   controlsOrientation = "horizontal",
+  sizeMetric: controlledSizeMetric,
+  onSizeMetricChange,
   renderArtistLink,
   artistUuid: controlledArtistUuid,
   onArtistUuidChange,
@@ -1709,10 +1786,6 @@ function GenreTreeView({
   renderSongLeading,
   renderSongActions,
   renderTracksToolbar,
-  editMode,
-  onEditModeChange,
-  renderTitleEditor,
-  renderParentsEditor,
   renderDangerZone,
   expanded,
   onExpandedChange,
@@ -1725,12 +1798,20 @@ function GenreTreeView({
   const [internalArtistUuid, setInternalArtistUuid] = (0, import_react10.useState)(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
+  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react10.useState)("songs");
+  const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
+  const deferredSizeMetric = (0, import_react10.useDeferredValue)(sizeMetric);
+  const changeSizeMetric = (metric) => {
+    if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
+    onSizeMetricChange?.(metric);
+  };
   const changeArtist = (uuid) => {
     if (!isArtistControlled) setInternalArtistUuid(uuid);
     onArtistUuidChange?.(uuid);
   };
   const {
     isLoading,
+    isFetching: isTreeFetching,
     genrePlaylistByNodeId,
     visibleGenrePlaylists,
     groupedGenrePlaylistsByRoot,
@@ -1755,6 +1836,8 @@ function GenreTreeView({
     criteriaOverviewSchema,
     artistUuid
   });
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree18.genreUpdateMutationKey }) > 0;
+  const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
   const artistResult = (0, import_genre_tree18.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
   const filterArtist = (0, import_react10.useMemo)(
@@ -1771,7 +1854,7 @@ function GenreTreeView({
   const artistPanel = useArtistPanel({
     uuid: artistUuid,
     getBackendBaseUrl: artistBaseUrl,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
     expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
     onExpandedChange: (on) => {
       if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
@@ -1809,10 +1892,6 @@ function GenreTreeView({
   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,
@@ -1834,15 +1913,15 @@ function GenreTreeView({
     label: "Artists",
     items: artistSearchResult.artists.map((artist) => ({
       key: artist.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "block truncate font-medium", children: [
           artist.name,
-          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
             " \xB7 ",
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -1852,7 +1931,8 @@ function GenreTreeView({
         onArtistSelect?.(artist);
       }
     })),
-    status: artistSearchResult.isError ? "Search failed" : artistSearchResult.settled && artistSearchResult.artists.length === 0 ? "No artists found" : ""
+    status: artistSearchResult.isError ? "Search failed" : artistSearchResult.settled && artistSearchResult.artists.length === 0 ? "No artists found" : "",
+    loading: artistSearchResult.pending
   } : void 0;
   const handleSelectedNodeChange = (node) => {
     selectNode(node);
@@ -1873,15 +1953,15 @@ function GenreTreeView({
     (node, { toolbar, ancestors, family }) => {
       const genrePlaylist = genrePlaylistByNodeId.get(node.id);
       const criteria = genrePlaylist?.criteria;
-      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
         toolbar,
         family
       ] }), aside: ancestors };
       const genreUuid = criteria.uuid;
       return {
-        primary: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        primary: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
           toolbar,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             GenreNodeActionBand,
             {
               node,
@@ -1891,14 +1971,15 @@ function GenreTreeView({
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
                     genrePlaylists: visibleGenrePlaylists,
                     scope,
                     getBackendBaseUrl,
-                    onClose: hidePopup
+                    onClose: hidePopup,
+                    onParentChanged
                   }
                 )
               ),
@@ -1906,7 +1987,7 @@ function GenreTreeView({
               playback
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             GenreDetailExtras,
             {
               family,
@@ -1938,6 +2019,7 @@ function GenreTreeView({
       handleGenreRenameAction,
       showPopup,
       hidePopup,
+      onParentChanged,
       visibleGenrePlaylists,
       playback,
       filterArtist,
@@ -1955,7 +2037,7 @@ function GenreTreeView({
   );
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
-  const detailTab = placement === "regions" && (selectedNodeId || detailOverlay) ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const detailTab = placement === "regions" && (selectedNodeId || detailOverlay) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     PanelEdgeTab,
     {
       side: "left",
@@ -1963,8 +2045,8 @@ function GenreTreeView({
       center: detailExpanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : onDetailExpandedChange ? { label: "Extend panel", onClick: () => onDetailExpandedChange(true) } : null
     }
   ) : null;
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       GenreSearch,
       {
         genrePlaylists: visibleGenrePlaylists,
@@ -1976,8 +2058,8 @@ function GenreTreeView({
         extraResults: artistExtraResults
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -1989,7 +2071,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -2000,8 +2082,8 @@ function GenreTreeView({
         }
       )
     ] }),
-    !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_ui13.SegmentedControl,
+    !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_ui14.SegmentedControl,
       {
         "aria-label": "Tree view mode",
         value: viewMode,
@@ -2014,14 +2096,14 @@ function GenreTreeView({
         ]
       }
     ),
-    !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: "flex items-center gap-1",
         role: "group",
         "aria-label": "Tree display options",
-        children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_ui13.Button,
+        children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_ui14.Button,
           {
             variant: allowWheelRotation ? "default" : "outline",
             size: "sm",
@@ -2031,8 +2113,8 @@ function GenreTreeView({
         )
       }
     ),
-    !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_ui13.IconTextButton,
+    !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_ui14.IconTextButton,
       {
         icon: import_lucide_react8.Plus,
         text: "Add root",
@@ -2040,33 +2122,33 @@ function GenreTreeView({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       ref: rootRef,
       className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "left-5 top-5"}`,
             children: actions
           }
         ),
-        detailTab && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        detailTab && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             className: `absolute top-1/2 z-30 -translate-y-1/2 transition-[opacity,visibility] duration-150 ease-out ${isTreeReady ? "opacity-100" : "pointer-events-none invisible opacity-0"} ${detailExpanded ? "right-[calc(var(--layout-center-right)-var(--layout-edge-tab-w))]" : isCollapsed ? "left-0" : "left-[calc(var(--layout-gutter)+var(--layout-left-w))]"}`,
             children: detailTab
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "tree-view-container flex-1 min-w-0 flex flex-col h-full", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "tree-view-container flex-1 min-w-0 flex flex-col h-full", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
           // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
           // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
           // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
           // The panel's own Zoom in button is hidden: the search bar carries it.
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             GenrePlaylistTreeWheel,
             {
               scope,
@@ -2084,6 +2166,9 @@ function GenreTreeView({
               readOnly,
               allowWheelRotation,
               controlsOrientation,
+              sizeMetric: filterArtist ? "songs" : deferredSizeMetric,
+              busy,
+              floatingControlsLeading: filterArtist ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric }),
               defaultViewport,
               onViewportChange,
               ...infoPanelCuration
@@ -2091,7 +2176,7 @@ function GenreTreeView({
           ) }) })
         ) : viewMode === "pop-core" ? (
           // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               scope,
@@ -2109,13 +2194,16 @@ function GenreTreeView({
               readOnly,
               allowWheelRotation,
               controlsOrientation,
+              sizeMetric: filterArtist ? "songs" : deferredSizeMetric,
+              busy,
+              floatingControlsLeading: filterArtist ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric }),
               defaultViewport,
               onViewportChange,
               ...infoPanelCuration,
               ...focus
             }
           ) }) })
-        ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           GenrePlaylistTreeWheelRadialPopCore,
           {
             outline: true,
@@ -2134,13 +2222,13 @@ function GenreTreeView({
             readOnly,
             ...infoPanelCuration
           }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
           ([uuid, genrePlaylistTreePerRoot], rootIndex) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
                 className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   GenrePlaylistTreePerRoot,
                   {
                     scope,
@@ -2184,7 +2272,7 @@ var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun6 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function TrackListSidebar({
   className = "",
   renderDuration,
@@ -2209,7 +2297,7 @@ function TrackListSidebar({
   }, [hasMore, loadMore]);
   const { hideTrackListSidebar } = (0, import_genre_tree20.useTrackListSidebarVisibility)();
   const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem]";
-  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       "data-theme": "dark",
@@ -2219,16 +2307,16 @@ function TrackListSidebar({
         /* Match player height exactly */
       } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "header flex h-16 px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "origin flex text-xl ", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "header flex h-16 px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "origin flex text-xl ", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "info flex flex-col justify-center items-center pt-1 mr-2 text-[var(--color-text-muted)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "info flex flex-col justify-center items-center pt-1 mr-2 text-[var(--color-text-muted)]", children: [
             trackList.origin.type === import_genre_tree21.TrackListOriginType.GENRE_PLAYLIST ? "\u2022 Genre playlist \u2022 " : trackList.origin.type === import_genre_tree21.TrackListOriginType.ARTIST ? "\u2022 Artist \u2022 " : `\u2022 ${trackNoun.singular} playlist \u2022 `,
             `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular} \u2022`
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "button",
             {
               type: "button",
@@ -2239,12 +2327,12 @@ function TrackListSidebar({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "ul",
           {
             className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list overflow-auto max-h-[calc(100vh-63.5px-79px-56px-3.5px)] list-none p-0 m-0",
             children: [
-              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 TrackItem,
                 {
                   track,
@@ -2254,7 +2342,7 @@ function TrackListSidebar({
                   renderArtistLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -2269,7 +2357,7 @@ var import_lucide_react9 = require("lucide-react");
 var import_tailwind_merge2 = require("tailwind-merge");
 var import_player11 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var PANEL_ID = "player-panel";
 var iconButtonClassName = "flex h-6 w-6 shrink-0 items-center justify-center p-0 rounded-md hover:bg-white/10";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
@@ -2299,7 +2387,7 @@ function PlayerPanel({
     label: "Extend song list panel",
     onClick: () => setIsExtendRequested(true)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       id: PANEL_ID,
@@ -2312,7 +2400,7 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           PanelEdgeTab,
           {
             side: "right",
@@ -2322,7 +2410,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge2.twMerge)(
@@ -2330,26 +2418,26 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: playerTrackObject?.track?.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: playerTrackObject?.track?.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "button",
                     {
                       type: "button",
                       onClick: onClose,
                       className: iconButtonClassName,
                       "aria-label": "Close player",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.X, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react9.X, { size: 16 })
                     }
                   ) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_player11.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_player11.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
                 ] })
               ] }),
-              isTrackListSidebarVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              isTrackListSidebarVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 TrackListSidebar,
                 {
                   layout: "inline",
@@ -2372,11 +2460,11 @@ function PlayerPanel({
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
 var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "input",
       {
         id: `star-${instanceId}-${i}`,
@@ -2388,16 +2476,16 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_ai.AiOutlineStar,
         {
           className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree23.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       import_ai.AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`