@tribe-nest/forge 1.13.0

package/src/ui/styled/MembershipTiers.tsx

@@ -0,0 +1,115 @@
+import type { MembershipTier } from "../../types/models";
+import { useGetMembershipTiers } from "../../data/queries/useMembership";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { priceTaxCaption } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Button } from "./Button";
+import { Loading } from "./Loading";
+
+export interface MembershipTiersProps {
+  /** Format a numeric amount for display. Defaults to `$X.XX`. */
+  formatAmount?: (amount: number) => string;
+  /**
+   * Where "Select" sends the buyer. The chosen tier id is appended as the
+   * `membershipTierId` query param. Default `/i/membership/checkout`.
+   */
+  checkoutPath?: string;
+  /** Optional override for tier selection (e.g. router navigation). */
+  onSelect?: (tier: MembershipTier) => void;
+  /** Optional page heading. Pass `null` to omit. Default `"Membership"`. */
+  heading?: string | null;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Drop-in membership page. Renders every membership tier as a centered,
+ * responsive card row (a single tier sits at a natural card width rather than
+ * stretching full-screen). "Select" routes to `checkoutPath` with the tier id,
+ * or calls `onSelect` when provided.
+ */
+export function MembershipTiers({
+  formatAmount,
+  checkoutPath = "/i/membership/checkout",
+  onSelect,
+  heading = "Membership",
+  className,
+  style,
+}: MembershipTiersProps) {
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  // Display-only: inclusive stores caption tier prices as tax-inclusive.
+  const pricesIncludeTax = usePricesIncludeTax();
+  const taxCaption = priceTaxCaption({ pricesIncludeTax });
+  const { data: tiers, isLoading } = useGetMembershipTiers();
+
+  if (isLoading) return <Loading fullPage />;
+  if (!tiers?.length) return <p style={{ color: t.text }}>No membership tiers available.</p>;
+
+  const priceLabel = (tier: MembershipTier) => {
+    if (tier.payWhatYouWant) {
+      return `Pay what you want from ${fmt(tier.payWhatYouWantMinimum ?? 0)}/mo`;
+    }
+    if (tier.priceMonthly) return `${fmt(tier.priceMonthly)}/mo`;
+    if (tier.priceYearly) return `${fmt(tier.priceYearly)}/yr`;
+    return "Free";
+  };
+
+  const select = (tier: MembershipTier) => {
+    if (onSelect) return onSelect(tier);
+    if (typeof window !== "undefined") {
+      const sep = checkoutPath.includes("?") ? "&" : "?";
+      window.location.href = `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}`;
+    }
+  };
+
+  return (
+    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+      {heading && <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24, fontFamily: t.headingFontFamily }}>{heading}</h1>}
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
+        {tiers.map((tier) => (
+          <div
+            key={tier.id}
+            style={{
+              flex: "1 1 260px",
+              maxWidth: 340,
+              width: "100%",
+              background: t.surface,
+              border: `1px solid ${t.primary}30`,
+              borderRadius: t.cornerRadius,
+              padding: 24,
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+            }}
+          >
+            <h2 style={{ fontSize: 22, fontWeight: 700, fontFamily: t.headingFontFamily }}>{tier.name}</h2>
+            <div style={{ fontSize: 24, fontWeight: 800, color: t.primary }}>
+              {priceLabel(tier)}
+              {taxCaption && priceLabel(tier) !== "Free" && (
+                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: t.text, opacity: 0.65 }}>
+                  {taxCaption}
+                </span>
+              )}
+            </div>
+            {tier.description && <p style={{ opacity: 0.75 }}>{tier.description}</p>}
+            {!!tier.benefits?.length && (
+              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
+                {tier.benefits.map((b) => (
+                  <li key={b.id} style={{ display: "flex", gap: 8, opacity: 0.85 }}>
+                    <span style={{ color: t.primary }}>✓</span>
+                    {b.title}
+                  </li>
+                ))}
+              </ul>
+            )}
+            <Button fullWidth style={{ marginTop: "auto" }} onClick={() => select(tier)}>
+              Select
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/OfferButton.tsx

@@ -0,0 +1,181 @@
+import type { ReactNode } from "react";
+import { Offer, useOfferContext, type OfferPaymentRenderProps } from "../headless/offer";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+
+export interface OfferButtonProps {
+  productId: string;
+  text?: string;
+  finalisePath?: string;
+  onSuccess?: () => void;
+  /** Optional — falls back to a registered <ForgePaymentProvider>. */
+  renderPayment?: (props: OfferPaymentRenderProps) => ReactNode;
+  formatAmount?: (amount: number) => string;
+}
+
+/** One-line themed product-purchase button + modal, built on the `<Offer>` compound. */
+export function OfferButton({ productId, text, finalisePath, onSuccess, renderPayment, formatAmount }: OfferButtonProps) {
+  const theme = useForgeTheme();
+  const registered = usePaymentRenderer();
+  const fmt = useAmountFormatter(formatAmount);
+  const renderPay =
+    renderPayment ?? (registered ? (p: OfferPaymentRenderProps) => registered({ ...p, mode: "redirect" }) : undefined);
+
+  return (
+    <Offer productId={productId} finalisePath={finalisePath} onSuccess={onSuccess}>
+      <Offer.Trigger asChild>
+        <button
+          style={{
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            border: "none",
+            borderRadius: theme.cornerRadius,
+            padding: "10px 18px",
+            fontWeight: 600,
+            cursor: "pointer",
+            fontFamily: theme.fontFamily,
+          }}
+        >
+          {text ?? "Buy now"}
+        </button>
+      </Offer.Trigger>
+
+      <Offer.Modal
+        overlayStyle={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }}
+        style={{
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "min(480px, calc(100vw - 32px))",
+          maxHeight: "85vh",
+          overflowY: "auto",
+          background: theme.colors.background,
+          color: theme.colors.text,
+          borderRadius: theme.cornerRadius,
+          padding: 24,
+          zIndex: 51,
+          fontFamily: theme.fontFamily,
+        }}
+      >
+        <OfferBody fmt={fmt} renderPayment={renderPay} />
+      </Offer.Modal>
+    </Offer>
+  );
+}
+
+function OfferBody({
+  fmt,
+  renderPayment,
+}: {
+  fmt: (n: number) => string;
+  renderPayment?: (props: OfferPaymentRenderProps) => ReactNode;
+}) {
+  const c = useOfferContext();
+  const theme = useForgeTheme();
+  const inputStyle = {
+    width: "100%",
+    padding: 10,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.background,
+    color: theme.colors.text,
+  } as const;
+
+  if (c.isLoading) return <Loading />;
+  if (!c.product) return <p style={{ marginTop: 8 }}>Product not found.</p>;
+
+  // ── Payment (redirect) ──
+  if (c.step === "payment") {
+    return (
+      <div>
+        <Offer.Title className="">{c.product.title}</Offer.Title>
+        <div style={{ display: "flex", justifyContent: "space-between", margin: "12px 0" }}>
+          <span>Total</span>
+          <strong style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</strong>
+        </div>
+        {renderPayment ? (
+          <Offer.PaymentStep>{(p) => renderPayment(p)}</Offer.PaymentStep>
+        ) : (
+          <p style={{ opacity: 0.7 }}>Payment is not configured.</p>
+        )}
+      </div>
+    );
+  }
+
+  // ── Details ──
+  return (
+    <Offer.DetailsStep>
+      <Offer.Title className="">{c.product.title}</Offer.Title>
+      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 12 }}>
+        {c.variants.length > 1 && (
+          <label>
+            Option
+            <select
+              value={c.selectedVariant?.id ?? ""}
+              onChange={(e) => c.setSelectedVariantId(e.target.value)}
+              style={inputStyle}
+            >
+              {c.variants.map((v) => (
+                <option key={v.id} value={v.id}>
+                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || "Default"} — {fmt(v.price)}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+
+        <label>
+          Quantity
+          <select value={c.quantity} onChange={(e) => c.setQuantity(Number(e.target.value))} style={inputStyle}>
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <div style={{ display: "flex", gap: 8 }}>
+          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle} />
+          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle} />
+        </div>
+        <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle} />
+        <input
+          placeholder="Confirm email"
+          type="email"
+          value={c.confirmEmail}
+          onChange={(e) => c.setConfirmEmail(e.target.value)}
+          style={inputStyle}
+        />
+
+        <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600 }}>
+          <span>Total</span>
+          <span style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</span>
+        </div>
+
+        {c.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{c.error}</p>}
+
+        <button
+          onClick={c.continueToPayment}
+          disabled={c.isProcessing}
+          style={{
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            border: "none",
+            borderRadius: theme.cornerRadius,
+            padding: "12px 18px",
+            fontWeight: 600,
+            cursor: "pointer",
+            opacity: c.isProcessing ? 0.6 : 1,
+          }}
+        >
+          {c.isProcessing ? "Processing…" : "Continue to payment"}
+        </button>
+      </div>
+    </Offer.DetailsStep>
+  );
+}

package/src/ui/styled/PageActions.tsx

@@ -0,0 +1,124 @@
+import { type CSSProperties } from "react";
+import { usePageActions, type PageActionDescriptor } from "../../data/queries/usePageActions";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { EmailListForm } from "./EmailListForm";
+import { OfferButton } from "./OfferButton";
+import { ProductGrid } from "./ProductGrid";
+import { DonationButton } from "./DonationButton";
+import { MembershipTiers } from "./MembershipTiers";
+
+export interface PageActionsProps {
+  pageType: string;
+  entityId?: string;
+  placement?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+function ActionRenderer({ action }: { action: PageActionDescriptor }) {
+  const theme = useForgeTheme();
+  const c = action.config as Record<string, any>;
+
+  switch (action.type) {
+    case "newsletter":
+      return (
+        <EmailListForm
+          emailListId={c.emailListId}
+          title={c.title}
+          description={c.description}
+          buttonText={c.buttonText}
+          successMessage={c.successMessage}
+          includeName={c.includeName}
+          includePhoneNumber={c.includePhoneNumber}
+        />
+      );
+    case "lead_magnet":
+      return (
+        <EmailListForm
+          leadMagnetId={c.leadMagnetId}
+          emailListId={c.emailListId}
+          title={c.title}
+          description={c.description}
+          buttonText={c.buttonText}
+          successMessage={c.successMessage}
+          includeName={c.includeName}
+          includePhoneNumber={c.includePhoneNumber}
+        />
+      );
+    case "offer":
+      return <OfferButton productId={c.productId} text={c.text} />;
+    case "product_cards":
+      return (
+        <div>
+          {c.title && <h3 style={{ fontWeight: 600, marginBottom: 12 }}>{c.title}</h3>}
+          <ProductGrid columns={c.columns} limit={c.limit} />
+        </div>
+      );
+    case "donation":
+      return <DonationButton donationId={c.donationId} text={c.text} />;
+    case "membership":
+      return <MembershipTiers heading={c.heading ?? null} />;
+    case "button":
+      return (
+        <a
+          href={c.href}
+          target={c.target ?? "_self"}
+          rel={c.target === "_blank" ? "noopener noreferrer" : undefined}
+          style={{
+            display: "inline-block",
+            background: theme.colors.primary,
+            color: theme.colors.textPrimary ?? readableTextOn(theme.colors.primary),
+            borderRadius: theme.cornerRadius,
+            padding: "10px 20px",
+            fontWeight: 600,
+            textDecoration: "none",
+          }}
+        >
+          {c.text}
+        </a>
+      );
+    default:
+      return null;
+  }
+}
+
+// Compact CTAs (forms + single buttons) read better constrained; the product
+// grid and membership tiers want the full width.
+const COMPACT_TYPES = new Set<PageActionDescriptor["type"]>([
+  "newsletter",
+  "lead_magnet",
+  "donation",
+  "offer",
+  "button",
+]);
+
+// SSR-safe responsive rule (no window/JS): compact items take at most half the
+// width on desktop, full width on tablet/mobile.
+const RESPONSIVE_CSS = `
+.forge-pa-compact { width: 100%; }
+@media (min-width: 768px) { .forge-pa-compact { max-width: 50%; } }
+`;
+
+/**
+ * Renders an artist's configured call-to-action blocks for a page slot. The one
+ * renderer shared across every Forge surface (apps/client, site-starter,
+ * AI-code-built sites) — each descriptor maps to an existing Forge primitive.
+ * Renders nothing when the slot is empty.
+ */
+export function PageActions({ pageType, entityId, placement = "after_content", className, style }: PageActionsProps) {
+  const { data } = usePageActions(pageType, entityId, placement);
+  const actions = data?.actions ?? [];
+  if (actions.length === 0) return null;
+
+  return (
+    <div className={className} style={{ display: "flex", flexDirection: "column", gap: 32, textAlign: "left", ...style }}>
+      <style dangerouslySetInnerHTML={{ __html: RESPONSIVE_CSS }} />
+      {actions.map((action) => (
+        <div key={action.id} className={COMPACT_TYPES.has(action.type) ? "forge-pa-compact" : undefined}>
+          <ActionRenderer action={action} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/ui/styled/PaymentLinkConfirmation.tsx

@@ -0,0 +1,50 @@
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+import { usePaymentLinkFinalize } from "../../data/queries/usePaymentLink";
+
+export interface PaymentLinkConfirmationProps {
+  paymentLinkId: string;
+  /**
+   * Formats a monetary amount for display. Receives the payment's own currency
+   * as a second argument so the shell can honor it (defaults to plain USD-style).
+   */
+  formatAmount?: (n: number, currency?: string) => string;
+  /** Where the "back to payment" action links. Defaults to the payment-link page. */
+  paymentPath?: string;
+}
+
+export function PaymentLinkConfirmation({
+  paymentLinkId,
+  formatAmount,
+  paymentPath = `/i/payment-link/${paymentLinkId}`,
+}: PaymentLinkConfirmationProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const { data, isLoading, error } = usePaymentLinkFinalize(paymentLinkId);
+
+  if (isLoading) return <Loading fullPage />;
+  if (error || !data) return <p style={{ color: theme.colors.text }}>We couldn’t load this payment.</p>;
+
+  const paid = data.status === "paid" || !!data.paidAt;
+
+  return (
+    <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center", color: theme.colors.text }}>
+      <h1 style={{ fontSize: 28, fontWeight: 800, marginBottom: 8 }}>
+        {paid ? "Payment received" : "Payment not completed"}
+      </h1>
+      <p style={{ opacity: 0.75, marginBottom: 16 }}>
+        {paid
+          ? `Thank you, ${data.recipientName}. Your payment to ${data.profileName} is complete.`
+          : `This payment is ${data.status}. If you were charged, please contact support.`}
+      </p>
+      <p style={{ fontWeight: 700, color: theme.colors.primary }}>{fmt(Number(data.amount), data.currency)}</p>
+      <a
+        href={paymentPath}
+        style={{ display: "inline-block", marginTop: 24, color: theme.colors.primary, textDecoration: "underline" }}
+      >
+        Back to payment
+      </a>
+    </div>
+  );
+}

package/src/ui/styled/PaymentLinkPayment.tsx

@@ -0,0 +1,85 @@
+import { usePaymentLinkPayment } from "../headless/paymentLink/usePaymentLinkPayment";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { summarizeTaxQuote } from "../format/PriceDisplay";
+import { Loading } from "./Loading";
+
+export interface PaymentLinkPaymentProps {
+  paymentLinkId: string;
+  /** Currency formatter (e.g. `(n) => formatCurrency(n, CURRENCY)`). Falls back to the link's own currency. */
+  formatAmount?: (n: number) => string;
+  /** Return path after payment. Forwarded to `usePaymentLinkPayment`. */
+  returnPath?: string;
+}
+
+/**
+ * Themed payment-request view + payment surface, built on
+ * `usePaymentLinkPayment` and the app-registered payment renderer
+ * (`usePaymentRenderer`).
+ */
+export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }: PaymentLinkPaymentProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const renderPayment = usePaymentRenderer();
+  const { link, clientSecret, returnUrl, isStarting, error, taxQuote } = usePaymentLinkPayment(paymentLinkId, {
+    returnPath,
+  });
+
+  if (link.isLoading) return <Loading fullPage />;
+  if (link.error || !link.data) return <p style={{ color: theme.colors.text }}>Payment link not found.</p>;
+
+  const data = link.data;
+  const isPaid = data.status === "paid" || !!data.paidAt;
+  const money = (n: number) => fmt(n, data.currency);
+
+  return (
+    <div style={{ maxWidth: 520, margin: "0 auto", color: theme.colors.text }}>
+      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 4 }}>Payment request</h1>
+      <p style={{ opacity: 0.7, fontSize: 14, marginBottom: 16 }}>from {data.profileName}</p>
+
+      <div
+        style={{
+          border: `1px solid ${theme.colors.primary}20`,
+          borderRadius: theme.cornerRadius,
+          padding: 20,
+          marginBottom: 20,
+        }}
+      >
+        <div style={{ fontSize: 32, fontWeight: 800, color: theme.colors.primary }}>
+          {money(Number(data.amount))}
+          {(() => {
+            // Authoritative tax quote from start-payment (display only).
+            const taxSummary = summarizeTaxQuote(taxQuote, money);
+            return taxSummary ? (
+              <span style={{ display: "block", fontSize: 13, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+                {taxSummary.mode === "inclusive" ? taxSummary.label : `+ ${taxSummary.formattedTax} tax`}
+              </span>
+            ) : null;
+          })()}
+        </div>
+        <div style={{ fontSize: 14, opacity: 0.8, marginTop: 8 }}>Billed to {data.recipientName}</div>
+        {data.message && <p style={{ marginTop: 12, lineHeight: 1.6, opacity: 0.9 }}>{data.message}</p>}
+      </div>
+
+      {isPaid ? (
+        <p style={{ fontWeight: 700, color: theme.colors.primary }}>This payment has been completed. Thank you!</p>
+      ) : (
+        <div>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
+          {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
+          {clientSecret ? (
+            renderPayment?.({
+              clientSecret,
+              returnUrl,
+              amount: Number(data.amount),
+              mode: "redirect",
+            })
+          ) : (
+            <>{isStarting ? <Loading label="Preparing payment…" size={22} /> : <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>}</>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/Paywall.tsx

@@ -0,0 +1,54 @@
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface PaywallProps {
+  title?: string;
+  message?: string;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+/** A themed "members only" card — pair with `<MembershipGate fallback={...}>`. */
+export function Paywall({
+  title = "Members only",
+  message = "This content is available to members. Join to unlock it.",
+  actionText = "Become a member",
+  onAction,
+}: PaywallProps) {
+  const theme = useForgeTheme();
+  return (
+    <div
+      style={{
+        border: `1px solid ${theme.colors.primary}30`,
+        borderRadius: theme.cornerRadius,
+        padding: 24,
+        textAlign: "center",
+        color: theme.colors.text,
+        background: theme.colors.background,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ fontSize: 24, marginBottom: 8 }} aria-hidden>
+        🔒
+      </div>
+      <h3 style={{ fontWeight: 600, marginBottom: 6 }}>{title}</h3>
+      <p style={{ opacity: 0.8, marginBottom: 16 }}>{message}</p>
+      {onAction && (
+        <button
+          onClick={onAction}
+          style={{
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            border: "none",
+            borderRadius: theme.cornerRadius,
+            padding: "10px 18px",
+            fontWeight: 600,
+            cursor: "pointer",
+          }}
+        >
+          {actionText}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/PlayButton.tsx

@@ -0,0 +1,48 @@
+import { useAudioPlayer, type AudioTrack } from "../../contexts/AudioPlayerContext";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface PlayButtonProps {
+  track: AudioTrack;
+  /** Optional queue to continue with after this track. */
+  queue?: AudioTrack[];
+  label?: string;
+}
+
+/** Play/pause toggle for a single track, bound to the Forge audio player. */
+export function PlayButton({ track, queue, label }: PlayButtonProps) {
+  const theme = useForgeTheme();
+  const a = useAudioPlayer();
+  const isCurrent = a.currentTrack?.id === track.id;
+  const playing = isCurrent && a.isPlaying;
+
+  const onClick = () => {
+    if (isCurrent) {
+      playing ? a.pause() : a.play();
+    } else {
+      a.loadAndPlay(track, queue);
+    }
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        background: theme.colors.primary,
+        color: readableTextOn(theme.colors.primary),
+        border: "none",
+        borderRadius: theme.cornerRadius,
+        padding: "8px 14px",
+        fontWeight: 600,
+        cursor: "pointer",
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <span>{playing ? "⏸" : "▶"}</span>
+      {label ?? track.title}
+    </button>
+  );
+}