@tribe-nest/forge 3.29.0 → 3.31.0

package/src/ui/headless/broadcast/useBroadcastWatch.ts

@@ -1,43 +1,143 @@
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { IBroadcastPass } from "../../../types/models";
-import { useLiveBroadcasts, useValidateBroadcastPass } from "../../../data/queries/useBroadcasts";
+import {
+  useLiveBroadcast,
+  useLiveBroadcastPoll,
+  useBroadcastSessionApi,
+  useValidateBroadcastPass,
+} from "../../../data/queries/useBroadcasts";
+import {
+  broadcastSessionKey,
+  hasBroadcastEnded,
+  needsPassValidation,
+  selectBroadcastScreen,
+  type BroadcastScreen,
+} from "./broadcastState";
 
 const errMessage = (e: unknown) =>
   (e as { response?: { data?: { message?: string } } })?.response?.data?.message || "Invalid pass.";
 
+/** How often a watching viewer tells the server it is still there. */
+const SESSION_PING_MS = 15000;
+
+const readSessionId = (broadcastId?: string): string | null => {
+  if (!broadcastId || typeof localStorage === "undefined") return null;
+  return localStorage.getItem(broadcastSessionKey(broadcastId));
+};
+
 /**
- * Headless broadcast watch: resolves a broadcast from the live list and gates it
- * behind pass validation. Composes `useLiveBroadcasts` + `useValidateBroadcastPass`.
- * Once `pass` is set the caller can mount its player with the returned playback info.
+ * Headless broadcast watch: everything the watch page does apart from drawing it.
+ *
+ * Reads the broadcast by id, polls a second copy so the end of a stream reaches
+ * a viewer who is already watching, re-opens a session held from an earlier
+ * visit, gates the whole thing behind pass validation, and keeps the session
+ * heartbeat running while the broadcast is on.
+ *
+ * The render decision itself is `screen`, computed by the pure
+ * `selectBroadcastScreen`, so what is on the page is decided by rules that can
+ * be checked without a browser.
  */
 export function useBroadcastWatch(broadcastId?: string) {
-  const broadcasts = useLiveBroadcasts();
+  const broadcastQuery = useLiveBroadcast(broadcastId);
+  const pollQuery = useLiveBroadcastPoll(broadcastId);
   const validatePass = useValidateBroadcastPass();
+  const sessionApi = useBroadcastSessionApi();
+
   const [pass, setPass] = useState<IBroadcastPass | null>(null);
+  const [hasValidPass, setHasValidPass] = useState(false);
+  const [isSessionLoading, setIsSessionLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const pingRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const broadcast = useMemo(
-    () => broadcasts.data?.find((b) => b.id === broadcastId),
-    [broadcasts.data, broadcastId],
+  const broadcast = broadcastQuery.data;
+  const polled = pollQuery.data;
+
+  const startPing = useCallback(
+    (sessionId: string) => {
+      if (!broadcastId) return;
+      if (pingRef.current) clearInterval(pingRef.current);
+      pingRef.current = setInterval(() => {
+        sessionApi.sessionPing(broadcastId, sessionId).catch(() => {
+          // A dropped heartbeat is not worth interrupting the stream over. The
+          // server ages the session out and the next ping re-establishes it.
+        });
+      }, SESSION_PING_MS);
+    },
+    // `sessionApi` is rebuilt every render (it closes over the Axios client), so
+    // it is deliberately not a dependency: including it would restart the
+    // heartbeat on every render and reset the interval before it ever fired.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [broadcastId],
   );
 
-  // Derive lifecycle from the broadcast timestamps (no explicit status field).
-  const isEnded = !!broadcast?.endedAt;
-  const isLive = !!broadcast?.startedAt && !broadcast?.endedAt;
-  const status: "scheduled" | "live" | "ended" | undefined = !broadcast
-    ? undefined
-    : isEnded
-      ? "ended"
-      : isLive
-        ? "live"
-        : "scheduled";
+  // Re-open a session parked in storage by an earlier visit. Until this settles
+  // the page shows nothing, so a returning viewer never sees the ticket box
+  // flash before their existing pass is recognised.
+  useEffect(() => {
+    if (!broadcastId) return;
+    const sessionId = readSessionId(broadcastId);
+    if (!sessionId) {
+      setIsSessionLoading(false);
+      return;
+    }
+    let cancelled = false;
+    sessionApi
+      .validateSession(broadcastId, sessionId)
+      .then((restored) => {
+        if (cancelled) return;
+        setPass(restored);
+        setHasValidPass(true);
+        startPing(restored.sessionId);
+      })
+      .catch(() => {
+        // A session the server no longer honours simply means "ask for the
+        // ticket again". It is not an error the viewer needs to read.
+      })
+      .finally(() => {
+        if (!cancelled) setIsSessionLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [broadcastId, startPing]);
 
+  const isEnded = hasBroadcastEnded(broadcast, polled);
+
+  // Once it has ended there is nobody to be counted as watching.
+  useEffect(() => {
+    if (isEnded && pingRef.current) {
+      clearInterval(pingRef.current);
+      pingRef.current = null;
+    }
+  }, [isEnded]);
+
+  useEffect(
+    () => () => {
+      if (pingRef.current) clearInterval(pingRef.current);
+    },
+    [],
+  );
+
+  /**
+   * Present a ticket code. On acceptance the session id is parked in storage so
+   * a refresh does not re-ask for it, and the heartbeat starts.
+   */
   const validate = async (eventPassId: string, sessionId?: string) => {
     setError(null);
     if (!broadcastId) return;
     try {
-      const result = await validatePass.mutateAsync({ broadcastId, eventPassId, sessionId });
+      const result = await validatePass.mutateAsync({
+        broadcastId,
+        eventPassId,
+        sessionId: sessionId ?? readSessionId(broadcastId) ?? undefined,
+      });
+      setHasValidPass(true);
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(broadcastSessionKey(broadcastId), result.sessionId);
+      }
       setPass(result);
+      startPing(result.sessionId);
       return result;
     } catch (e) {
       setError(errMessage(e));
@@ -45,15 +145,68 @@ export function useBroadcastWatch(broadcastId?: string) {
     }
   };
 
+  /**
+   * Leave deliberately. The server is told first (so the audience count drops
+   * now rather than when the heartbeat ages out), then the stored session goes,
+   * so the next visit starts clean.
+   */
+  const leave = useCallback(() => {
+    if (!broadcastId) return;
+    sessionApi.leave(broadcastId, readSessionId(broadcastId) ?? undefined).catch(() => {
+      // Best effort. The session ages out on its own.
+    });
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(broadcastSessionKey(broadcastId));
+    }
+    setHasValidPass(false);
+    if (pingRef.current) {
+      clearInterval(pingRef.current);
+      pingRef.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [broadcastId]);
+
+  const isLive = !!broadcast?.startedAt && !broadcast?.endedAt;
+  const status: "scheduled" | "live" | "ended" | undefined = !broadcast
+    ? undefined
+    : isEnded
+      ? "ended"
+      : isLive
+        ? "live"
+        : "scheduled";
+
+  const screen: BroadcastScreen = selectBroadcastScreen({
+    broadcast,
+    polled,
+    isBroadcastLoading: broadcastQuery.isLoading,
+    isSessionLoading,
+    error: broadcastQuery.error,
+    hasValidPass,
+    pass,
+  });
+
   return {
     broadcast,
-    isLoading: broadcasts.isLoading,
+    /** The polled copy. Only its `endedAt` is acted on. */
+    polled,
+    isLoading: broadcastQuery.isLoading,
+    /** True while a stored session is being re-checked. */
+    isSessionLoading,
+    /** The failure of the broadcast READ, as opposed to a rejected ticket. */
+    loadError: broadcastQuery.error,
     status,
     isLive,
     isEnded,
+    /** Does this broadcast sit behind a ticket at all? */
+    isGated: needsPassValidation(broadcast),
     pass,
+    hasValidPass,
     validate,
+    leave,
     isValidating: validatePass.isPending,
+    /** The rejected-ticket message, for the viewer to read. */
     error,
+    /** What to draw. */
+    screen,
   };
 }

package/src/ui/headless/event/useEventCheckout.ts

@@ -18,7 +18,7 @@ import {
 import { holdExpiredMessage, isHoldExpiredError } from "../checkout/inventoryHold";
 import { useInventoryHold } from "../checkout/useInventoryHold";
 import { computeBookingFeeAmount } from "../../format/bookingFee";
-import { isPayWhatYouWant, pwywDefaultAmount, resolveUnitPrice, ticketSubtotals } from "../../format/pwyw";
+import { checkoutAmounts, isPayWhatYouWant, resolveUnitPrice, ticketSubtotals } from "../../format/pwyw";
 import { parseMembershipGateError, type MembershipGateRefusal } from "../../format/membershipGate";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
@@ -151,18 +151,13 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
    * they have not. This is what gets SENT, so an untouched box is not the same
    * as choosing the minimum: the suggestion is the default offer.
    */
-  const effectiveAmounts = useMemo(() => {
-    if (!event) return {} as Record<string, number>;
-    const out: Record<string, number> = {};
-    for (const ticket of event.tickets) {
-      if (!isPayWhatYouWant(ticket) || (selectedTickets[ticket.id] ?? 0) <= 0) continue;
-      out[ticket.id] =
-        pwywAmounts[ticket.id] != null
-          ? resolveUnitPrice(ticket, pwywAmounts[ticket.id])
-          : pwywDefaultAmount(ticket);
-    }
-    return out;
-  }, [event, selectedTickets, pwywAmounts]);
+  const effectiveAmounts = useMemo(
+    () =>
+      event
+        ? checkoutAmounts({ tickets: event.tickets, quantities: selectedTickets, chosen: pwywAmounts })
+        : ({} as Record<string, number>),
+    [event, selectedTickets, pwywAmounts],
+  );
 
   /**
    * `paid` is what the buyer owes for tickets; `floor` is the same cart valued

package/src/ui/headless/index.ts

@@ -99,6 +99,20 @@ export {
 export { useInvoicePayment, type UseInvoicePaymentOptions } from "./invoice/useInvoicePayment";
 export { usePaymentLinkPayment, type UsePaymentLinkPaymentOptions } from "./paymentLink/usePaymentLinkPayment";
 export { useBroadcastWatch } from "./broadcast/useBroadcastWatch";
+export {
+  broadcastListStatus,
+  broadcastSessionKey,
+  hasBroadcastEnded,
+  isPassValidated,
+  minTicketPrice,
+  needsPassValidation,
+  selectBroadcastScreen,
+  type BroadcastListStatus,
+  type BroadcastListStatusText,
+  type BroadcastScreen,
+  type BroadcastScreenInput,
+  type BroadcastView,
+} from "./broadcast/broadcastState";
 export { useChatRoom } from "./chat/useChatRoom";
 export { useMessageThread, type UseMessageThreadResult } from "./chat/useMessageThread";
 export { useChatAttachmentUpload, type PendingAttachment } from "./chat/useChatAttachmentUpload";

package/src/ui/headless/membership/useMembershipCheckout.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
 import { useGetMembershipTiers } from "../../../data/queries/useMembership";
 import {
@@ -14,9 +14,30 @@ import {
   type PaystackCheckoutOutcome,
   type PaystackCheckoutSession,
 } from "../../../utils/paystackCheckout";
+import type { MembershipTier } from "../../../types/models";
+import {
+  cycleCeiling,
+  cycleFloor,
+  cycleIsFree,
+  defaultChosenAmount,
+  defaultCycle,
+  offeredCycles,
+  refuseMembershipAmount,
+  resolveSubscriptionAmount,
+  type BillingCycle,
+  type MembershipAmountRefusal,
+} from "../../format/membershipPwyw";
 
-export type MembershipCheckoutStep = "select" | "payment";
-export type BillingCycle = "month" | "year";
+/**
+ * Three steps, matching the client app's three stages.
+ *
+ * `"tier"` is the tier grid, reached when the page was opened with no
+ * `?membershipTierId`. `"select"` keeps its old name deliberately: it is the
+ * tier detail + billing options step, and every site already calls
+ * `setStep("select")` to go back from payment.
+ */
+export type MembershipCheckoutStep = "tier" | "select" | "payment";
+export type { BillingCycle };
 
 export interface UseMembershipCheckoutOptions {
   /** Pre-select a tier (e.g. from a `?membershipTierId=` param). */
@@ -25,27 +46,37 @@ export interface UseMembershipCheckoutOptions {
   returnPath?: string;
   /** Where free activations land. Default `/i/account?tab=membership`. */
   freeReturnPath?: string;
-  /** Called when a FREE activation completes in-app — the host navigates however
-   * it wants, instead of Forge doing a `window.location` redirect. */
-  onComplete?: () => void;
+  /**
+   * Called when the subscription completes IN-APP with nothing left to pay: a
+   * free activation, or a tier change the server settled by proration. The host
+   * navigates however it wants instead of Forge doing a `window.location`
+   * redirect. `requiresConfirmation` is false for both of those, because there
+   * is no provider payment for the account page to reconcile.
+   */
+  onComplete?: (result: { requiresConfirmation: boolean }) => void;
 }
 
 const errMessage = (e: unknown) =>
   (e as { response?: { data?: { message?: string } } })?.response?.data?.message || "Something went wrong.";
 
-const tierIsFree = (tier: { payWhatYouWant: boolean; priceMonthly?: number; priceYearly?: number }, cycle: BillingCycle) =>
-  !tier.payWhatYouWant && !(cycle === "month" ? tier.priceMonthly : tier.priceYearly);
-
 /**
- * Headless membership subscribe: tier selection → free activation OR paid Stripe
- * subscription. Composes `useGetMembershipTiers`, `useCreateFreeSubscription`,
+ * Headless membership subscribe: tier selection, billing cycle, pay-what-you-want
+ * amount, then free activation OR a paid subscription on the tenant's provider.
+ * Composes `useGetMembershipTiers`, `useCreateFreeSubscription`,
  * `useCreateSubscription`, and (for the return page) `useConfirmLatestSubscription`.
- * Paid flow exposes `clientSecret` for `ForgePaymentProvider`.
+ * Paid Stripe flow exposes `clientSecret` for `ForgePaymentProvider`; paid
+ * Paystack flow exposes `openPaystackCheckout`.
  *
  * Three outcomes, not two: a member who ALREADY subscribes to this artist is
  * changing tier, which the server settles by proration on their existing
- * subscription. That completes server-side with no payment step — it is
+ * subscription. That completes server-side with no payment step, it is
  * finished the moment `subscribe()` resolves, exactly like a free activation.
+ *
+ * ## Pricing lives in `ui/format/membershipPwyw`
+ *
+ * The floor, the default cycle, which cycles are on offer and the single number
+ * that gets sent are pure functions there, so they are testable without a
+ * provider tree. Read that file before changing anything about money here.
  */
 export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
   const { user } = usePublicAuth();
@@ -54,28 +85,105 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
   const createFree = useCreateFreeSubscription();
   const confirmLatest = useConfirmLatestSubscription();
 
-  const [step, setStep] = useState<MembershipCheckoutStep>("select");
+  const [step, setStep] = useState<MembershipCheckoutStep>(opts.initialTierId ? "select" : "tier");
   const [selectedTierId, setSelectedTierId] = useState<string | undefined>(opts.initialTierId);
-  const [billingCycle, setBillingCycle] = useState<BillingCycle>("month");
+  const [billingCycle, setBillingCycleState] = useState<BillingCycle>("month");
   const [customAmount, setCustomAmount] = useState<number>(0);
+  const [amountRefusal, setAmountRefusal] = useState<MembershipAmountRefusal | null>(null);
   const [clientSecret, setClientSecret] = useState<string | undefined>();
   /** The started Paystack checkout, kept so the modal can be re-opened. */
   const [paystackSession, setPaystackSession] = useState<PaystackCheckoutSession | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const selectedTier = useMemo(
-    () => tiers?.find((t) => t.id === selectedTierId),
-    [tiers, selectedTierId],
+  const selectedTier = useMemo(() => tiers?.find((t) => t.id === selectedTierId), [tiers, selectedTierId]);
+
+  /**
+   * Seed the cycle and the amount box from the tier itself.
+   *
+   * This runs on the tier ARRIVING as much as on it being clicked: a page opened
+   * with `?membershipTierId=` has a selected id before the tier list has
+   * loaded, and without this the box would sit at 0 on a tier whose floor is 20.
+   *
+   * Keyed on the tier ID, not the tier OBJECT: the tier list is a React Query
+   * result, so a background refetch hands back an equal-but-new object, and
+   * keying on that would wipe the amount a fan had just typed.
+   */
+  useEffect(() => {
+    if (!selectedTier) return;
+    const cycle = defaultCycle(selectedTier);
+    setBillingCycleState(cycle);
+    setCustomAmount(defaultChosenAmount(selectedTier, cycle));
+    setAmountRefusal(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTier?.id]);
+
+  /** Switching cycle re-seeds the amount box: the floor belongs to the cycle. */
+  const setBillingCycle = useCallback(
+    (cycle: BillingCycle) => {
+      setBillingCycleState(cycle);
+      setAmountRefusal(null);
+      if (selectedTier) setCustomAmount(defaultChosenAmount(selectedTier, cycle));
+    },
+    [selectedTier],
   );
 
-  const amount = useMemo(() => {
-    if (!selectedTier) return 0;
-    if (selectedTier.payWhatYouWant) return customAmount;
-    return (billingCycle === "month" ? selectedTier.priceMonthly : selectedTier.priceYearly) ?? 0;
-  }, [selectedTier, billingCycle, customAmount]);
+  const selectTier = useCallback((tier: MembershipTier) => {
+    setSelectedTierId(tier.id);
+    setError(null);
+    setAmountRefusal(null);
+    setStep("select");
+  }, []);
+
+  const backToTierList = useCallback(() => {
+    setSelectedTierId(undefined);
+    setError(null);
+    setAmountRefusal(null);
+    setStep("tier");
+  }, []);
+
+  const minimumAmount = selectedTier ? cycleFloor(selectedTier, billingCycle) : 0;
+  const maximumAmount = selectedTier ? cycleCeiling(selectedTier, billingCycle) : null;
+  const cycles = selectedTier ? offeredCycles(selectedTier) : { month: false, year: false };
+  const isFreeCycle = selectedTier ? cycleIsFree(selectedTier, billingCycle) : false;
+
+  /**
+   * What will be charged, and what will be SENT. A fixed tier ignores the
+   * amount box, so a figure left over from a pay-what-you-want tier cannot leak
+   * into a fixed-price subscription.
+   */
+  const amount = useMemo(
+    () => (selectedTier ? resolveSubscriptionAmount(selectedTier, billingCycle, customAmount) : 0),
+    [selectedTier, billingCycle, customAmount],
+  );
+
+  const membership = user?.membership;
+  /** The tier they are on now, so its card can say so instead of offering itself. */
+  const currentTierId = membership?.membershipTierId;
+  /**
+   * A member with a live provider subscription picking a PAID tier is changing,
+   * not joining. The server settles it by proration on the subscription they
+   * already have, so the button says so.
+   */
+  const isChange =
+    !!membership?.paymentProviderSubscriptionId && membership.status === "active" && !isFreeCycle && !!selectedTier;
+
+  const finish = (requiresConfirmation: boolean) => {
+    if (opts.onComplete) {
+      opts.onComplete({ requiresConfirmation });
+      return;
+    }
+    if (typeof window !== "undefined") {
+      const origin = window.location.origin;
+      const path = requiresConfirmation
+        ? (opts.returnPath ?? "/i/account?tab=membership&confirmSubscription=true")
+        : (opts.freeReturnPath ?? "/i/account?tab=membership");
+      window.location.href = `${origin}${path}`;
+    }
+  };
 
   const subscribe = async () => {
     setError(null);
+    setAmountRefusal(null);
     if (!selectedTier) {
       setError("Select a membership tier.");
       return;
@@ -84,17 +192,22 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
       setError("Please sign in to subscribe.");
       return;
     }
+    // Checked BEFORE the request, so a pay-what-you-want box below the floor
+    // (or still on its initial zero) is a message beside the field rather than
+    // an `amount_must_be_positive` 400 with nowhere to land.
+    const refusal = refuseMembershipAmount(selectedTier, billingCycle, customAmount);
+    if (refusal) {
+      setAmountRefusal(refusal);
+      return;
+    }
     const origin = typeof window !== "undefined" ? window.location.origin : "";
     const returnUrl = `${origin}${opts.returnPath ?? "/i/account?tab=membership&confirmSubscription=true"}`;
     const attributionRefId = readAttributionRef() ?? undefined;
     const landing = readLanding() ?? {};
     try {
-      if (tierIsFree(selectedTier, billingCycle)) {
+      if (isFreeCycle) {
         await createFree.mutateAsync({ membershipTierId: selectedTier.id, attributionRefId, ...landing });
-        if (opts.onComplete) opts.onComplete();
-        else if (typeof window !== "undefined") {
-          window.location.href = `${origin}${opts.freeReturnPath ?? "/i/account?tab=membership"}`;
-        }
+        finish(false);
         return;
       }
       const data = await createPaid.mutateAsync({
@@ -115,10 +228,7 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
       // membership nobody has paid for.
       const requiresPayment = data.requiresPayment ?? !!(data.clientSecret || data.accessCode || data.checkoutUrl);
       if (!requiresPayment) {
-        if (opts.onComplete) opts.onComplete();
-        else if (typeof window !== "undefined") {
-          window.location.href = `${origin}${opts.freeReturnPath ?? "/i/account?tab=membership"}`;
-        }
+        finish(false);
         return;
       }
 
@@ -156,10 +266,26 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
     selectedTierId,
     setSelectedTierId,
     selectedTier,
+    selectTier,
+    backToTierList,
+    /** The tier the member is already on, so its card can be shown as taken. */
+    currentTierId,
+    /** True when pressing subscribe MOVES an existing subscription rather than starting one. */
+    isChange,
     billingCycle,
     setBillingCycle,
+    /** Which billing cycles this tier actually sells. */
+    cycles,
+    /** True when this cycle costs nothing, so `/subscriptions/free` is the call. */
+    isFreeCycle,
     customAmount,
     setCustomAmount,
+    /** The lowest amount this cycle may be bought at, in settlement-currency major units. */
+    minimumAmount,
+    /** The operator's ceiling for display, or null. Never applied to what is sent. */
+    maximumAmount,
+    /** Why the entered amount was refused, or null. Cleared on every edit path. */
+    amountRefusal,
     amount,
     subscribe,
     clientSecret,
@@ -178,5 +304,7 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
     error,
     /** Call on the return page to reconcile the latest subscription. */
     confirmLatest,
+    /** Signals a completed paid payment (the Stripe `onSucceeded` leg). */
+    finish,
   };
 }

package/src/ui/index.ts

@@ -153,6 +153,24 @@ export { PodcastList, type PodcastListProps } from "./styled/PodcastList";
 export { PodcastShow, type PodcastShowProps } from "./styled/PodcastShow";
 export { PodcastEpisode, type PodcastEpisodeProps } from "./styled/PodcastEpisode";
 export { ReplayList, type ReplayListProps } from "./styled/ReplayList";
+// Live broadcasts. A replay is the recording of one of these; this is the half
+// that is on now. `BroadcastWatch` carries the paywall.
+export { LiveBroadcastList, type LiveBroadcastListProps } from "./styled/LiveBroadcastList";
+export { BroadcastWatch, type BroadcastWatchProps } from "./styled/BroadcastWatch";
+export { EndedBroadcast, type EndedBroadcastProps } from "./styled/broadcast/EndedBroadcast";
+export {
+  BroadcastPassValidation,
+  type BroadcastPassValidationProps,
+} from "./styled/broadcast/BroadcastPassValidation";
+export {
+  BroadcastTicketPurchase,
+  type BroadcastTicketPurchaseProps,
+} from "./styled/broadcast/BroadcastTicketPurchase";
+export {
+  BroadcastPlayer,
+  type BroadcastPlayerProps,
+  type BroadcastPlayerRenderProps,
+} from "./styled/broadcast/BroadcastPlayer";
 export { ConfirmSubscription, type ConfirmSubscriptionProps } from "./styled/ConfirmSubscription";
 export { LeadMagnet, type LeadMagnetProps } from "./styled/LeadMagnet";
 export { CohortPage, type CohortPageProps } from "./styled/CohortPage";
@@ -177,6 +195,24 @@ export {
   resolveUnitPrice,
   ticketSubtotals,
 } from "./format/pwyw";
+// Membership pricing: which billing cycles a tier sells, a pay-what-you-want
+// cycle's floor, and the ONE number that may be sent to the subscriptions API.
+// Settlement-currency MAJOR units throughout: convert for the screen, never for
+// the request.
+export {
+  cycleFloor,
+  cycleCeiling,
+  cycleIsOffered,
+  cycleIsFree,
+  offeredCycles,
+  defaultCycle,
+  defaultChosenAmount,
+  clampMembershipAmount,
+  resolveSubscriptionAmount,
+  refuseMembershipAmount,
+  type PricedTier,
+  type MembershipAmountRefusal,
+} from "./format/membershipPwyw";
 // When a tier may be BOUGHT, for a site rendering its own ticket UI. Both halves
 // close a "discoverable only by failing" journey: `ticketSeatsAvailable`
 // subtracts `held` the way the server does, so a fan is never shown seats that