@behindthemusictree/app-kit-ui 31.0.0 → 32.0.0

package/dist/genre-tree/index.d.ts

@@ -17,9 +17,9 @@ type GenrePlaylistTracksSlots = {
 };
 
 type GenreDetailSlots<O extends CriteriaOverview> = {
-    /** Replaces the default Summary section. */
+    /** Replaces the body of the default Summary section; the title and frame stay. */
     renderSummary?: (overview: O) => ReactNode;
-    /** Replaces the default Essential section (e.g. "Essential songs"). */
+    /** Replaces the body of the default Essential section (e.g. "Essential songs"); the title and frame stay. */
     renderEssentialTracks?: (overview: O) => ReactNode;
 };
 type GenreDetailExtrasProps<O extends CriteriaOverview> = GenreDetailSlots<O> & GenrePlaylistTracksSlots & {

package/dist/genre-tree/index.js

@@ -15,7 +15,7 @@ import {
   TrackListSidebar,
   TrackPositionPlayPause,
   useGenrePlaylistPlayback
-} from "../chunk-AQASG5KT.js";
+} from "../chunk-QGGVPIXY.js";
 import "../chunk-DKQQLLMY.js";
 export {
   GenreDetailPanel,

package/dist/index.cjs

@@ -1598,9 +1598,8 @@ function GenrePlaylistTracks({
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
     enabled: scope !== "me" || sessionRestored && !!session?.accessToken
   });
-  const sentinelRef = (0, import_react11.useRef)(null);
+  const [sentinel, setSentinel] = (0, import_react11.useState)(null);
   (0, import_react11.useEffect)(() => {
-    const sentinel = sentinelRef.current;
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
       if (entries.some((entry) => entry.isIntersecting)) {
@@ -1609,7 +1608,7 @@ function GenrePlaylistTracks({
     });
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, sentinel]);
   const pages = data?.pages ?? [];
   const tracks = pages.flatMap((page) => page.tracks);
   const total = pages[0]?.total ?? void 0;
@@ -1620,11 +1619,7 @@ function GenrePlaylistTracks({
       showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InternalErrorPopup, { errorCode: import_transport7.ErrorCode.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
-      (0, import_track_noun2.capitalize)(trackNoun.plural),
-      total !== void 0 && ` (${total})`
-    ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
     renderTracksToolbar?.(),
     isPending ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { role: "alert", children: [
       "Couldn't load ",
@@ -1687,9 +1682,9 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
-  ] });
+  ] }) });
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
@@ -1720,10 +1715,7 @@ function GenreDetailExtras({
   );
   if (isPending) {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.Skeleton, { className: "h-4 w-3/4" })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.Skeleton, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
@@ -1731,50 +1723,38 @@ function GenreDetailExtras({
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "gtv-info-panel-children-title", children: "Links" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs", children: [
-        summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-          "a",
-          {
-            href: summarySourceUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikipedia"
-            ]
-          }
-        ),
-        wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-          "a",
-          {
-            href: wikidataUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikidata"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid)
-    ] }),
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
+      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "a",
+        {
+          href: summarySourceUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            "Wikipedia"
+          ]
+        }
+      ),
+      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "a",
+        {
+          href: wikidataUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            "Wikidata"
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "gtv-info-panel-children-title", children: [
-        "Essential ",
-        trackNoun.plural
-      ] }),
-      essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1", children: "\u2014" })
-    ] }),
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       GenrePlaylistTracks,
       {