@tribe-nest/forge 3.23.0 → 3.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "publishConfig": {
     "access": "public"
   },

package/src/data/queries/useAnalytics.ts

@@ -62,25 +62,76 @@ export interface TrackEventOptions {
  * `const { track } = useTrackEvent(); track("cta_click", { id: "hero" })`.
  */
 export function useTrackEvent(opts?: TrackEventOptions) {
-  const { client, subdomain: ctxSubdomain } = useForge();
+  const { client, apiUrl, subdomain: ctxSubdomain } = useForge();
   const subdomain = opts?.subdomain ?? ctxSubdomain;
   const storeSession = opts?.storeSession ?? true;
 
-  const track = useCallback(
-    (eventType: string, eventData: Record<string, unknown> = {}) => {
-      if (typeof window === "undefined" || !client || !subdomain) return;
+  const buildPayload = useCallback(
+    (eventData: Record<string, unknown>) => {
       // Cookieless mode omits the sessionId entirely — the backend derives a
       // rotating per-day visitor hash so nothing touches the device.
-      const sessionId = storeSession ? getAnalyticsSessionId(subdomain) : undefined;
+      const sessionId = storeSession && subdomain ? getAnalyticsSessionId(subdomain) : undefined;
       const payload: Record<string, unknown> = { ...eventData };
       if (sessionId) payload.sessionId = sessionId;
+      return payload;
+    },
+    [subdomain, storeSession],
+  );
+
+  const track = useCallback(
+    (eventType: string, eventData: Record<string, unknown> = {}) => {
+      if (typeof window === "undefined" || !client || !subdomain) return;
       // Fire-and-forget: analytics must never block the UI or surface errors.
       client
-        .post("/public/websites/track-event", { subdomain, eventType, eventData: payload })
+        .post("/public/websites/track-event", { subdomain, eventType, eventData: buildPayload(eventData) })
         .catch(() => {});
     },
-    [client, subdomain, storeSession],
+    [client, subdomain, buildPayload],
+  );
+
+  /**
+   * Same event, but it survives the page going away.
+   *
+   * `track` above posts through the Axios instance, and Axios in the browser is
+   * XHR. XHR has no `keepalive` option at all, so when a click navigates the tab
+   * somewhere else the request is cancelled mid-flight and the event is simply
+   * lost. That is tolerable for a click that stays on the site and fatal for one
+   * that does not: on a music smart link EVERY conversion is an outbound
+   * navigation to Spotify, so the ordinary transport would drop a large share of
+   * the only events the page exists to record, and take the server-side Meta
+   * `Lead` down with them.
+   *
+   * `fetch` with `keepalive: true` is the fix. Deliberately not
+   * `navigator.sendBeacon`, which cannot set `Content-Type: application/json`
+   * without wrapping the body in a Blob, and this endpoint is JSON-only.
+   *
+   * Use it for any event immediately followed by a navigation. Ordinary
+   * in-page events should keep using `track`, which goes through the configured
+   * client and picks up its interceptors.
+   */
+  const trackBeacon = useCallback(
+    (eventType: string, eventData: Record<string, unknown> = {}) => {
+      if (typeof window === "undefined" || !apiUrl || !subdomain) return;
+      try {
+        void fetch(`${apiUrl.replace(/\/$/, "")}/public/websites/track-event`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          keepalive: true,
+          body: JSON.stringify({
+            subdomain,
+            eventType,
+            eventData: buildPayload(eventData),
+            // The referrer header only carries the origin cross-origin, so the
+            // server cannot work out which page this happened on by itself.
+            eventSourceUrl: window.location.href,
+          }),
+        }).catch(() => {});
+      } catch {
+        // Best-effort by definition; never disrupt the navigation.
+      }
+    },
+    [apiUrl, subdomain, buildPayload],
   );
 
-  return { track };
+  return { track, trackBeacon };
 }

package/src/data/queries/useMusicLink.ts

@@ -0,0 +1,28 @@
+import type { IMusicLink } from "../../types/models";
+import { useForge } from "../../provider/ForgeProvider";
+import { useQuery } from "@tanstack/react-query";
+
+/**
+ * One music smart link by slug.
+ *
+ * Pass `initialData` from the route loader (`fetchMusicLinkServer`) so the page
+ * renders complete on the server with no client spinner. That is not just a
+ * polish detail here: these links are opened almost entirely from social apps'
+ * in-app browsers on a phone, on the worst connection the fan will use all day,
+ * and a page that shows a spinner before its buttons loses the tap.
+ *
+ * `undefined` while loading, `null` when the link does not exist or is archived.
+ */
+export function useMusicLink(slug?: string, options?: { initialData?: IMusicLink | null }) {
+  const { client, profileId } = useForge();
+
+  return useQuery<IMusicLink | null>({
+    queryKey: ["music-link", profileId, slug],
+    queryFn: async () => {
+      const res = await client.get(`/public/music-links`, { params: { profileId, slug } });
+      return res.data ?? null;
+    },
+    enabled: !!profileId && !!client && !!slug,
+    ...(options?.initialData !== undefined ? { initialData: options.initialData } : {}),
+  });
+}

package/src/index.ts

@@ -77,6 +77,7 @@ export * from "./data/queries/useBlog";
 export * from "./data/queries/usePodcast";
 export * from "./data/queries/useCollections";
 export * from "./data/queries/useEvents";
+export * from "./data/queries/useMusicLink";
 export * from "./data/queries/useEventSeries";
 export * from "./data/queries/useInvoice";
 export * from "./data/queries/usePaymentLink";

package/src/server/index.ts

@@ -34,6 +34,7 @@ export type { ApiProbeResult, ForgeSsrDiagnostics, SsrFetchFailure };
 import type {
   IEvent,
   IEventSeries,
+  IMusicLink,
   IPublicProduct,
   PublicCourse,
   CoachingProduct,
@@ -54,6 +55,9 @@ import {
   type ReviewSchemaReview,
   type SiteSeoContext,
 } from "../utils/structuredData";
+// Also React-free, so it belongs in this entry rather than being re-derived by
+// each route that needs share tags.
+import { buildHeadMeta } from "../utils/headMeta";
 export type { SiteSeoContext };
 import type { SiteConfig } from "../data/queries/useWebsite";
 
@@ -293,6 +297,53 @@ export function fetchEventSeriesServer(opts: {
   });
 }
 
+/**
+ * Fetch a music smart link by slug for SSR.
+ *
+ * `null` means render the not-found state: the slug does not exist for this
+ * profile, or the link is archived. Archiving is how a creator takes a link
+ * down, so a 404 is the correct answer rather than a stale page.
+ */
+export function fetchMusicLinkServer(opts: {
+  apiUrl: string;
+  profileId?: string;
+  slug: string;
+}): Promise<IMusicLink | null> {
+  return getJson<IMusicLink>(opts.apiUrl, `/public/music-links`, {
+    profileId: opts.profileId,
+    slug: opts.slug,
+  });
+}
+
+/**
+ * Head tags for a music smart link.
+ *
+ * The share card matters more here than on any other page in the product. A
+ * music link exists to be pasted into an Instagram story, a WhatsApp message or
+ * a tweet, so for most of its audience the OG image and title ARE the page: they
+ * decide whether anyone taps through at all. `og:type` is `music.song` (or
+ * `music.album`) rather than the default `website`, which is what lets a
+ * platform render it as a music card instead of a generic link.
+ */
+export function buildMusicLinkHead(
+  link: Pick<IMusicLink, "title" | "artistName" | "description" | "artworkUrl"> | null,
+  opts?: { canonicalUrl?: string; kind?: "song" | "album" },
+) {
+  if (!link) {
+    return buildHeadMeta({ title: "Link not found", noindex: true });
+  }
+
+  const title = link.artistName ? `${link.artistName} - ${link.title}` : link.title;
+
+  return buildHeadMeta({
+    title,
+    description: link.description || `Listen to ${title} on your favourite streaming service.`,
+    image: link.artworkUrl || undefined,
+    canonicalUrl: opts?.canonicalUrl,
+    ogType: opts?.kind === "album" ? "music.album" : "music.song",
+  });
+}
+
 /** Fetch a single product by id or slug for SSR. */
 export function fetchProductServer(opts: {
   apiUrl: string;

package/src/types/models.ts

@@ -1875,3 +1875,45 @@ export type PaymentLinkData = {
   profileName: string;
   profileSubdomain: string;
 };
+
+/**
+ * A music smart link, as served publicly at `/l/<slug>` on a creator's site.
+ *
+ * This is the PUBLIC shape, which is narrower than the stored row: the backend
+ * builds it field by field, drops disabled destinations, sorts the rest by the
+ * order the creator arranged, and resolves `metaPixelId` from the route's
+ * tracking config (falling back to the profile pixel). No CAPI token is ever
+ * part of it.
+ */
+export interface IMusicLinkDestination {
+  /** A key from the platform allowlist, e.g. `spotify`, `appleMusic`. */
+  platform: string;
+  url: string;
+}
+
+/** Per-link presentation, layered over the site theme by `MusicLinkPage`. */
+export interface IMusicLinkTheme {
+  mode?: "light" | "dark";
+  background?: string;
+  text?: string;
+  accent?: string;
+  surface?: string;
+  border?: string;
+  /** Blurred cover behind the page. Defaults to on. */
+  artworkBackdrop?: boolean;
+  buttonShape?: "rounded" | "pill" | "square";
+}
+
+export interface IMusicLink {
+  id: string;
+  slug: string;
+  title: string;
+  artistName: string | null;
+  description: string | null;
+  artworkUrl: string | null;
+  releaseDate: string | null;
+  theme: IMusicLinkTheme | null;
+  destinations: IMusicLinkDestination[];
+  /** Public pixel id for this route, or null when neither it nor the profile has one. */
+  metaPixelId: string | null;
+}

package/src/ui/analytics/ForgeAnalytics.tsx

@@ -188,6 +188,17 @@ export function ForgeAnalytics({
       const el = start.closest("a,button,[data-track]") as HTMLElement | null;
       if (!el) return;
 
+      // Opt-out for elements that report their own click.
+      //
+      // This listener cannot know that a component already sent a richer event
+      // for the same click, so without a way to stand down, anything that tracks
+      // its own clicks is counted twice. Worse than the double count: this
+      // listener's payload carries no `eventId`, so the resulting CAPI `Lead`
+      // has nothing to dedupe against, and Meta sees two conversions for one
+      // action. Any element that fires its own event must carry
+      // `data-track-skip`.
+      if (el.closest("[data-track-skip]")) return;
+
       const anchor = el.closest("a") as HTMLAnchorElement | null;
       const text = (el.getAttribute("aria-label") || el.textContent || "").trim().slice(0, 120) || undefined;
       track("click", {
@@ -197,6 +208,10 @@ export function ForgeAnalytics({
         text,
         href: anchor?.href || undefined,
         id: el.id || el.getAttribute("data-track") || undefined,
+        // Page views have carried an id since this shipped; clicks did not, so a
+        // click's server-side CAPI twin had no `event_id` and could never be
+        // deduplicated against a browser pixel event of the same name.
+        eventId: newEventId(),
       });
     };
 

package/src/ui/index.ts

@@ -64,6 +64,7 @@ export { UserMenu, type UserMenuProps } from "./styled/UserMenu";
 export { EmailListForm, type EmailListFormProps } from "./styled/EmailListForm";
 export { BlogComments, type BlogCommentsProps } from "./styled/BlogComments";
 export { PageActions, type PageActionsProps } from "./styled/PageActions";
+export { MusicLinkPage, type MusicLinkPageProps } from "./styled/MusicLinkPage";
 export { BlogPostFooter, type BlogPostFooterProps } from "./styled/BlogPostFooter";
 export { BotProtection, EMPTY_BOT_FIELDS, type BotFields } from "./styled/BotProtection";
 export { ContactForm, type ContactFormProps } from "./styled/ContactForm";

package/src/ui/styled/MusicLinkPage.tsx

@@ -0,0 +1,365 @@
+import { useEffect, useMemo } from "react";
+import type { CSSProperties } from "react";
+import type { IMusicLink } from "../../types/models";
+import { useMusicLink } from "../../data/queries/useMusicLink";
+import { newEventId, useTrackEvent } from "../../data/queries/useAnalytics";
+import { usePageMetaPixel } from "../analytics/PageMetaPixel";
+import { PageMetaPixel } from "../analytics/PageMetaPixel";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { PageActions } from "./PageActions";
+
+/**
+ * How each streaming service is presented.
+ *
+ * `color` is the service's own brand colour, used for the badge, and `label` is
+ * the name a fan recognises rather than the API key.
+ *
+ * There is deliberately no logo artwork here. Reproducing a dozen trademarked
+ * marks from memory gets some of them subtly wrong, and every one of these
+ * services publishes brand guidelines with rules about colour, clear space and
+ * permitted alterations. A wrong Spotify logo on an artist's own domain is the
+ * artist's problem, not ours to create. Drop real SVGs in behind `icon` when
+ * the assets have been taken from each service's brand kit; the layout already
+ * reserves the space.
+ */
+const SERVICES: Record<string, { label: string; color: string; action?: string }> = {
+  spotify: { label: "Spotify", color: "#1DB954", action: "Play" },
+  appleMusic: { label: "Apple Music", color: "#FA243C", action: "Play" },
+  itunes: { label: "iTunes", color: "#FA243C", action: "Buy" },
+  youtube: { label: "YouTube", color: "#FF0000", action: "Watch" },
+  youtubeMusic: { label: "YouTube Music", color: "#FF0000", action: "Play" },
+  deezer: { label: "Deezer", color: "#A238FF", action: "Play" },
+  tidal: { label: "Tidal", color: "#000000", action: "Play" },
+  amazonMusic: { label: "Amazon Music", color: "#25D1DA", action: "Play" },
+  soundcloud: { label: "SoundCloud", color: "#FF5500", action: "Play" },
+  bandcamp: { label: "Bandcamp", color: "#629AA9", action: "Buy" },
+  audiomack: { label: "Audiomack", color: "#FFA200", action: "Play" },
+  boomplay: { label: "Boomplay", color: "#E62E2D", action: "Play" },
+  anghami: { label: "Anghami", color: "#8A2BE2", action: "Play" },
+  pandora: { label: "Pandora", color: "#3668FF", action: "Play" },
+  napster: { label: "Napster", color: "#00B9F1", action: "Play" },
+  audius: { label: "Audius", color: "#CC0FE0", action: "Play" },
+  tiktok: { label: "TikTok", color: "#000000", action: "Open" },
+};
+
+const serviceMeta = (platform: string) => SERVICES[platform] ?? { label: platform, color: "#666666", action: "Open" };
+
+export interface MusicLinkPageProps {
+  /** The slug from the route. Ignored when `link` is passed directly. */
+  slug?: string;
+  /** Server-fetched link from the route loader. Renders with no client fetch. */
+  initialLink?: IMusicLink | null;
+  /** Heading above the service list. */
+  listHeading?: string;
+  /** Shown when the slug resolves to nothing. */
+  notFoundMessage?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A music smart link page: artwork, title, and one row per streaming service.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * WHY THIS RENDERS AS A FIXED FULL-VIEWPORT LAYER
+ * ─────────────────────────────────────────────────────────────────────────
+ * A landing page has to own the screen, and on a deployed site there is no other
+ * way to get it. The starter's `__root.tsx` wraps every route in `<Nav/>`, a
+ * `max-width: 1040px` `<main>`, and `<SiteFooter/>`; it is tenant-owned, it is
+ * never overwritten by an update, and a route cannot escape the root route in
+ * TanStack. So a page that merely styles itself well still renders as a column
+ * in the middle of the artist's website, under their menu.
+ *
+ * Covering the viewport from inside the block is the only mechanism that works
+ * on sites that already exist, which is all of them. It is the default rather
+ * than an option for the same reason.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * WHY EACH SERVICE IS A REAL ANCHOR
+ * ─────────────────────────────────────────────────────────────────────────
+ * `<a href>`, not a button with a JS redirect. Fans long-press to copy, open in
+ * a new tab, and share these links onward, and a click handler pretending to be
+ * a link breaks all three. The tracking hangs off the click; it does not own the
+ * navigation, and if tracking fails the fan still reaches Spotify.
+ */
+export function MusicLinkPage({
+  slug,
+  initialLink,
+  listHeading = "Listen on",
+  notFoundMessage = "This link is no longer available.",
+  className,
+  style,
+}: MusicLinkPageProps) {
+  const siteTokens = useThemeTokens();
+  const { data, isLoading } = useMusicLink(slug, { initialData: initialLink });
+  const link = data ?? initialLink ?? null;
+
+  /**
+   * Site theme, then the link's `mode` preset, then its explicit colours.
+   *
+   * Three layers rather than one because the three answer different questions.
+   * The site theme is what every link should look like by default, and a creator
+   * who restyles their site should not then restyle twenty links. `mode` is how
+   * people actually talk about a release page ("make this one dark"), and it has
+   * to move background, text, surface and border together or the result is
+   * unreadable. Explicit colours are the escape from both.
+   */
+  const t = useMemo(() => {
+    const theme = link?.theme;
+    if (!theme) return siteTokens;
+
+    const preset =
+      theme.mode === "dark"
+        ? { background: "#0b0b0d", text: "#ffffff", surface: "#17171b", border: "#2a2a30", muted: "#a1a1aa" }
+        : theme.mode === "light"
+          ? { background: "#ffffff", text: "#111113", surface: "#f5f5f7", border: "#e4e4e7", muted: "#71717a" }
+          : {};
+
+    return {
+      ...siteTokens,
+      ...preset,
+      ...(theme.background ? { background: theme.background } : {}),
+      ...(theme.text ? { text: theme.text } : {}),
+      ...(theme.surface ? { surface: theme.surface } : {}),
+      ...(theme.border ? { border: theme.border } : {}),
+      ...(theme.accent ? { primary: theme.accent } : {}),
+      cornerRadius: theme.buttonShape === "pill" ? 999 : theme.buttonShape === "square" ? 0 : siteTokens.cornerRadius,
+    };
+  }, [siteTokens, link?.theme]);
+
+  const pixelId = link?.metaPixelId ?? "";
+  const { fire } = usePageMetaPixel(pixelId);
+  const { trackBeacon } = useTrackEvent();
+
+  // Lock the page behind the overlay. Without this the tenant's own page keeps
+  // scrolling underneath on iOS, which reads as a rendering bug.
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, []);
+
+  const destinations = useMemo(() => link?.destinations ?? [], [link]);
+
+  const onDestinationClick = (platform: string, url: string) => {
+    // ONE id, shared by the browser pixel event and the server-side CAPI twin
+    // that `maybeSendPageCapi` emits for this click. Meta deduplicates on
+    // (event_id, event_name), so without a shared id the same tap is counted as
+    // two conversions and the campaign optimises against inflated numbers.
+    const eventId = newEventId();
+
+    fire("Lead", { content_name: serviceMeta(platform).label, content_category: "music_link" });
+
+    trackBeacon("click", {
+      pathname: typeof window !== "undefined" ? window.location.pathname : undefined,
+      destination: platform,
+      slug: link?.slug,
+      href: url,
+      eventId,
+    });
+  };
+
+  if (!link) {
+    return (
+      <Overlay t={t} className={className} style={style}>
+        <p style={{ color: t.muted, fontFamily: t.fontFamily }}>{isLoading ? "" : notFoundMessage}</p>
+      </Overlay>
+    );
+  }
+
+  return (
+    <Overlay
+      t={t}
+      className={className}
+      style={style}
+      artworkUrl={link.theme?.artworkBackdrop === false ? null : link.artworkUrl}
+    >
+      {pixelId ? <PageMetaPixel pixelId={pixelId} /> : null}
+
+      <div style={{ width: "100%", maxWidth: 420, display: "flex", flexDirection: "column", alignItems: "center" }}>
+        {link.artworkUrl ? (
+          <img
+            src={link.artworkUrl}
+            alt={link.title}
+            width={260}
+            height={260}
+            style={{
+              width: 260,
+              height: 260,
+              maxWidth: "70vw",
+              maxHeight: "70vw",
+              objectFit: "cover",
+              borderRadius: t.cornerRadius,
+              boxShadow: "0 18px 50px rgba(0,0,0,0.45)",
+            }}
+          />
+        ) : null}
+
+        <h1
+          style={{
+            margin: "24px 0 4px",
+            fontSize: 24,
+            lineHeight: 1.25,
+            textAlign: "center",
+            color: t.text,
+            fontFamily: t.headingFontFamily || t.fontFamily,
+          }}
+        >
+          {link.title}
+        </h1>
+
+        {link.artistName ? (
+          <p style={{ margin: 0, fontSize: 16, color: t.muted, fontFamily: t.fontFamily }}>{link.artistName}</p>
+        ) : null}
+
+        {link.description ? (
+          <p
+            style={{
+              margin: "12px 0 0",
+              fontSize: 14,
+              textAlign: "center",
+              color: t.muted,
+              fontFamily: t.fontFamily,
+            }}
+          >
+            {link.description}
+          </p>
+        ) : null}
+
+        {destinations.length > 0 ? (
+          <p
+            style={{
+              margin: "28px 0 12px",
+              fontSize: 12,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: t.muted,
+              fontFamily: t.fontFamily,
+            }}
+          >
+            {listHeading}
+          </p>
+        ) : null}
+
+        <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 10 }}>
+          {destinations.map((destination) => {
+            const meta = serviceMeta(destination.platform);
+            return (
+              <a
+                key={destination.platform}
+                href={destination.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                // Stands the global click listener down. It would otherwise
+                // record a second, poorer event for this same tap, and its
+                // payload would drive a duplicate CAPI Lead.
+                data-track-skip=""
+                data-track={`music-link-${destination.platform}`}
+                onClick={() => onDestinationClick(destination.platform, destination.url)}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  padding: "12px 14px",
+                  borderRadius: t.cornerRadius,
+                  background: t.surface,
+                  border: `1px solid ${t.border}`,
+                  color: t.text,
+                  textDecoration: "none",
+                  fontFamily: t.fontFamily,
+                }}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    width: 34,
+                    height: 34,
+                    flex: "0 0 34px",
+                    borderRadius: 999,
+                    background: meta.color,
+                    color: "#ffffff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 15,
+                    fontWeight: 700,
+                  }}
+                >
+                  {meta.label.charAt(0)}
+                </span>
+                <span style={{ flex: 1, fontSize: 15, fontWeight: 600 }}>{meta.label}</span>
+                <span style={{ fontSize: 13, fontWeight: 700, color: t.primary }}>{meta.action}</span>
+              </a>
+            );
+          })}
+        </div>
+
+        {/*
+          The creator's own additions: a newsletter form, a vinyl pre-order, a
+          lead magnet, a donation. This route is a platform-owned chassis file
+          that is re-materialized from the starter on every build, so anything
+          added to it IN CODE would be overwritten on the next deploy. Page
+          actions are data instead, resolved per link with a per-page-type
+          default, so the shell stays ours and the contents stay theirs.
+        */}
+        <div style={{ width: "100%", marginTop: 28 }}>
+          <PageActions pageType="music_link" entityId={link.id} />
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+
+function Overlay({
+  t,
+  artworkUrl,
+  className,
+  style,
+  children,
+}: {
+  t: ReturnType<typeof useThemeTokens>;
+  artworkUrl?: string | null;
+  className?: string;
+  style?: CSSProperties;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={className}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        overflowY: "auto",
+        background: t.background,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: "48px 20px 64px",
+        ...style,
+      }}
+    >
+      {artworkUrl ? (
+        <div
+          aria-hidden="true"
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundImage: `url(${artworkUrl})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            filter: "blur(48px) saturate(1.4)",
+            transform: "scale(1.2)",
+            opacity: 0.35,
+            pointerEvents: "none",
+          }}
+        />
+      ) : null}
+      <div style={{ position: "relative", width: "100%", display: "flex", justifyContent: "center" }}>{children}</div>
+    </div>
+  );
+}