@tribe-nest/forge 3.48.0 → 3.52.0

package/src/ui/styled/CohortConfirmation.tsx

@@ -0,0 +1,259 @@
+import { AlertTriangle, ArrowRight, CalendarDays, Mail } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+import {
+  ConfirmationStage,
+  ConfirmationCard,
+  CheckSeal,
+  WarnSeal,
+  Perforation,
+  ConfirmationRow,
+  ConfirmationLostCheckout,
+  alpha,
+} from "./Confirmation";
+import { useForgeT } from "../../i18n";
+import { useCohortEnrolmentFinalize } from "../../data/queries/useCohortEnrolment";
+import { useCohortPage } from "../../data/queries/useCohortPage";
+import { useBookingSecret } from "../headless/booking/useBookingSecret";
+
+export interface CohortConfirmationProps {
+  cohortId: string;
+  bookingId?: string;
+  /** Formats a monetary amount for display. Defaults to a plain USD-style `$0.00`. */
+  formatAmount?: (n: number, currency?: string) => string;
+  /** Where the "browse more" action links. */
+  explorePath?: string;
+  /**
+   * Where "start over" goes when this browser has no credential for the
+   * booking, i.e. back to the cohort to enrol again. Defaults to
+   * `/i/cohorts/:cohortId`.
+   */
+  restartPath?: string;
+}
+
+/**
+ * The page a cohort buyer lands on after paying.
+ *
+ * The pair to `CohortCheckout`. Both had to exist together: the checkout's
+ * Stripe `return_url` points here, so shipping the buy control without this
+ * would have sent every paying buyer to a 404 holding a charge and no
+ * confirmation.
+ *
+ * The booking's credential is read from sessionStorage rather than the URL. It
+ * was stashed there by the checkout before the redirect, because a secret in a
+ * return URL reaches history, referrers and anything the buyer pastes.
+ */
+export function CohortConfirmation({
+  cohortId,
+  bookingId,
+  formatAmount,
+  explorePath = "/i/courses",
+  restartPath,
+}: CohortConfirmationProps) {
+  const theme = useForgeTheme();
+  const t = useForgeT();
+  const fmt = useAmountFormatter(formatAmount);
+  // `resolved` gates the finalise: storage can only be read on the client, so
+  // firing before then would send the call without a secret it actually has and
+  // get a 404.
+  const { secret, resolved, isMissing } = useBookingSecret(bookingId);
+  const { data, isLoading, error } = useCohortEnrolmentFinalize(
+    cohortId,
+    resolved ? bookingId : undefined,
+    secret ?? undefined,
+  );
+  const { data: page } = useCohortPage(cohortId);
+
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+  const cohort = page?.data?.cohort;
+  const course = page?.data?.course;
+
+  if (!resolved || isLoading) {
+    return (
+      <ConfirmationStage>
+        <Loading label={t("forge.cohort_confirmation.loading")} />
+      </ConfirmationStage>
+    );
+  }
+
+  if (error || !data) {
+    // A booking with no credential in THIS browser is indistinguishable
+    // server-side from a stranger holding a leaked id, so it 404s on purpose.
+    // Explain that rather than implying the enrolment never existed.
+    if (isMissing) {
+      return (
+        <ConfirmationStage>
+          <ConfirmationLostCheckout
+            title={t("forge.cohort_confirmation.lost_title")}
+            body={t("forge.cohort_confirmation.lost_body")}
+            restartPath={restartPath ?? `/i/cohorts/${cohortId}`}
+            restartLabel={t("forge.cohort_confirmation.lost_restart")}
+          />
+        </ConfirmationStage>
+      );
+    }
+    return (
+      <ConfirmationStage>
+        <p style={{ color: text }}>{t("forge.cohort_confirmation.not_found")}</p>
+      </ConfirmationStage>
+    );
+  }
+
+  const confirmed = data.status === "confirmed";
+
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard>
+        <div style={{ padding: "38px 30px 26px", textAlign: "center" }}>
+          {confirmed ? <CheckSeal /> : <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />}
+          <p
+            className="cf-rise"
+            style={{
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
+              color: confirmed ? primary : "#f59e0b",
+              animationDelay: "0.15s",
+            }}
+          >
+            {confirmed
+              ? t("forge.cohort_confirmation.eyebrow_confirmed")
+              : t("forge.cohort_confirmation.eyebrow_action_needed")}
+          </p>
+          <h1
+            className="cf-rise"
+            style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}
+          >
+            {confirmed
+              ? t("forge.cohort_confirmation.title_confirmed")
+              : t("forge.cohort_confirmation.title_incomplete")}
+          </h1>
+          <p
+            className="cf-rise"
+            style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}
+          >
+            {confirmed
+              ? data.firstName
+                ? t("forge.cohort_confirmation.body_confirmed", { first_name: data.firstName })
+                : t("forge.cohort_confirmation.body_confirmed_no_name")
+              : t("forge.cohort_confirmation.body_incomplete", { status: data.status })}
+          </p>
+        </div>
+
+        {cohort && (
+          <div className="cf-rise" style={{ padding: "0 30px 24px", animationDelay: "0.36s" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                borderRadius: theme.cornerRadius,
+                border: `1px solid ${alpha(primary, 0.18)}`,
+                background: alpha(primary, 0.04),
+                padding: 12,
+              }}
+            >
+              <div
+                style={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: theme.cornerRadius,
+                  background: alpha(primary, 0.12),
+                  display: "grid",
+                  placeItems: "center",
+                  flexShrink: 0,
+                }}
+              >
+                <CalendarDays size={26} color={primary} />
+              </div>
+              <div style={{ minWidth: 0 }}>
+                <div style={{ fontSize: 16, fontWeight: 800 }}>{course?.title ?? cohort.title}</div>
+                <div style={{ fontSize: 13, color: alpha(text, 0.6) }}>{cohort.title}</div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <Perforation />
+
+        <div className="cf-rise" style={{ padding: "26px 30px 8px", animationDelay: "0.44s" }}>
+          {confirmed && (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                fontSize: 14,
+                color: alpha(text, 0.8),
+                background: alpha(primary, 0.05),
+                border: `1px solid ${alpha(primary, 0.16)}`,
+                borderRadius: theme.cornerRadius,
+                padding: "12px 14px",
+                marginBottom: 16,
+              }}
+            >
+              <Mail size={16} color={primary} style={{ marginTop: 2, flexShrink: 0 }} />
+              <span style={{ lineHeight: 1.5 }}>
+                {t("forge.cohort_confirmation.emailed", { email: data.email ?? "" })}
+              </span>
+            </div>
+          )}
+          <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 12, columnGap: 16, margin: 0 }}>
+            <ConfirmationRow
+              label={t("forge.cohort_confirmation.row_student")}
+              value={`${data.firstName} ${data.lastName}`.trim() || t("forge.cohort_confirmation.not_given")}
+            />
+            <ConfirmationRow
+              label={t("forge.cohort_confirmation.row_reference")}
+              value={`#${data.id.slice(0, 8).toUpperCase()}`}
+              mono
+            />
+            {/*
+              WHAT WAS ACTUALLY TAKEN, which on an instalment plan is the first
+              payment and not the plan's total. Reading the booking's charged
+              amount rather than the plan keeps this honest either way.
+            */}
+            <ConfirmationRow
+              label={t("forge.cohort_confirmation.row_paid")}
+              value={
+                Number(data.totalAmountInChargedCurrency ?? data.totalAmount) > 0
+                  ? data.totalAmountInChargedCurrency
+                    ? fmt(Number(data.totalAmountInChargedCurrency), data.chargedCurrency || undefined)
+                    : fmt(Number(data.totalAmount))
+                  : t("forge.cohort_confirmation.free")
+              }
+              accent
+              strong
+            />
+          </dl>
+        </div>
+
+        <div className="cf-rise" style={{ padding: "20px 30px 30px", animationDelay: "0.52s" }}>
+          <a
+            href={explorePath}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "13px 18px",
+              borderRadius: theme.cornerRadius,
+              background: primary,
+              color: readableTextOn(primary),
+              fontWeight: 700,
+              textDecoration: "none",
+            }}
+          >
+            {t("forge.cohort_confirmation.explore")} <ArrowRight size={16} />
+          </a>
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}

package/src/ui/styled/CohortPage.tsx

@@ -1,6 +1,8 @@
 import { useCohortPage } from "../../data/queries/useCohortPage";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { CourseCallsSection } from "./CourseCallsSection";
+import { CohortCheckout } from "./CohortCheckout";
 import { Loading } from "./Loading";
 
 export interface CohortPageProps {
@@ -13,7 +15,7 @@ function formatDate(value: string | number | Date): string {
   return new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
-/** Cohort landing page — structured cohort/course/curriculum data. Built on `useCohortPage`. */
+/** Cohort landing page: structured cohort/course/curriculum data. Built on `useCohortPage`. */
 export function CohortPage({ cohortId }: CohortPageProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
@@ -41,6 +43,21 @@ export function CohortPage({ cohortId }: CohortPageProps) {
       {(cohort.startDate || cohort.endDate) && <p style={{ opacity: 0.7, marginBottom: 16 }}>{dateLabel}</p>}
       {cohort.description && <p style={{ marginBottom: 24, lineHeight: 1.6 }}>{cohort.description}</p>}
 
+      {/*
+        THE WAY IN. Until 2026-09-07 this page described a cohort and gave a
+        reader no way to buy a seat on it: the checkout existed on the backend
+        and nothing on any storefront called it, so a creator could build a
+        cohort, price it and publish it with no way to sell it.
+
+        It renders NOTHING when the cohort has no pricing plans, which is what
+        keeps a not-yet-priced cohort from showing a dead button, and nothing
+        for a student who is already enrolled would be wrong to see - the
+        backend refuses a second seat on the same cohort for the same email.
+      */}
+      <div style={{ marginBottom: 32 }}>
+        <CohortCheckout cohortId={cohort.id} />
+      </div>
+
       {course && (
         <section style={{ marginBottom: 24 }}>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 6 }}>{course.title}</h2>
@@ -79,6 +96,19 @@ export function CohortPage({ cohortId }: CohortPageProps) {
           </div>
         </section>
       )}
+
+      {/* The cohort's live calls, joinable, for the student looking at them.
+          The structured `data.calls` above this page carries no join address
+          on purpose (the payload is anonymous), so the JOINABLE list is read
+          separately and only for a signed-in student. Scoped to this cohort
+          plus the course behind it: a session addressed to everyone who bought
+          the course belongs on a cohort student's schedule, a sibling cohort's
+          does not. */}
+      <CourseCallsSection
+        courseId={course?.id ?? null}
+        cohortId={cohort.id}
+        style={{ marginTop: 32 }}
+      />
     </div>
   );
 }

package/src/ui/styled/CourseAccess.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "react";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useCourseClassroom, type UseCourseClassroomOptions } from "../headless/course/useCourseClassroom";
+import { CourseCallsSection } from "./CourseCallsSection";
 import { Loading } from "./Loading";
 import { useForgeT } from "../../i18n";
 
@@ -14,20 +15,20 @@ export interface CourseAccessProps extends UseCourseClassroomOptions {
 }
 
 /**
- * Enrolled course player — module/lesson sidebar, video progress tracking, and
+ * Enrolled course player: module/lesson sidebar, video progress tracking, and
  * the account-binding gate that stands in front of both. Built on the headless
  * `useCourseClassroom`.
  *
  * The three states worth naming, because each one strands somebody if it is
  * drawn as the others:
  *
- *   - **401** — a bound grant opened with no session. Almost always the buyer,
+ *   - **401**: a bound grant opened with no session. Almost always the buyer,
  *     on an old email link, on a device that never signed in. Gets a sign-in
  *     button that returns HERE, never a dead end.
- *   - **403** — a bound grant opened as somebody else. Gets "this belongs to a
+ *   - **403**: a bound grant opened as somebody else. Gets "this belongs to a
  *     different account" and a way OUT of the current session. Never the word
  *     "sign in", which they have already done.
- *   - **legacy** — no `account_id`, so the link alone is the credential. Opens
+ *   - **legacy**: no `account_id`, so the link alone is the credential. Opens
  *     normally, with a dismissible note offering to put it behind an account.
  */
 export function CourseAccess({
@@ -82,7 +83,7 @@ export function CourseAccess({
         <p style={{ fontSize: 14, color: tokens.muted, lineHeight: 1.6 }}>{gate.body}</p>
 
         {/* Naming the session they are in is what makes "wrong account"
-            actionable — otherwise the reader has no idea which of their
+            actionable, otherwise the reader has no idea which of their
             addresses they are currently signed in with. */}
         {gate.kind === "wrong_account" && classroom.signedInEmail && (
           <p style={{ fontSize: 13, color: tokens.muted }}>
@@ -127,7 +128,7 @@ export function CourseAccess({
         ...style,
       }}
     >
-      {/* Legacy grant, opened fine. An offer, not an obstacle — inline, muted,
+      {/* Legacy grant, opened fine. An offer, not an obstacle: inline, muted,
           dismissible, and never in front of the course the reader came for. */}
       {securePrompt && (
         <div
@@ -311,6 +312,18 @@ export function CourseAccess({
           )}
         </main>
       </div>
+
+      {/* The student's live calls, where the student already is.
+          Scoped to THIS enrolment: `cohortId` is the grant's own cohort, so a
+          student holding two grants on one course opens two classrooms and each
+          shows only its own sessions. No membership href, so the empty state
+          does not sell a membership to a course buyer. */}
+      <CourseCallsSection
+        courseId={data.access.courseId}
+        cohortId={data.access.cohortId ?? null}
+        navigate={go}
+        style={{ marginTop: 32 }}
+      />
     </div>
   );
 }

package/src/ui/styled/CourseCallsSection.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from "react";
+
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { MemberCallsCalendar } from "./members/MemberCallsCalendar";
+
+export interface CourseCallsSectionProps {
+  /** The course this surface is standing on. The classroom reads it off the access row. */
+  courseId?: string | null;
+  /** The cohort this surface is standing on, when there is one. */
+  cohortId?: string | null;
+  /** Heading above the calendar. Defaults to the translated "Live calls". */
+  title?: string;
+  /**
+   * Builds the href of the call itself, from its public id. The default is the
+   * generic call page, which is where both apps mount it.
+   */
+  getCallHref?: (publicId: string) => string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A student's live calls, on the page the student is already on.
+ *
+ * ## Why this is a wrapper and not a calendar
+ *
+ * `MemberCallsCalendar` is already call-kind agnostic: it renders whatever
+ * `listForAttendee` returns, and that resolves course and cohort audiences the
+ * same way it resolves membership tiers. A classroom-specific month grid would
+ * be a second implementation of the same month, the same open/closed rule and
+ * the same join address - which is the dual-surface trap this pillar has been
+ * caught by twice. So this file adds exactly two things and nothing else: the
+ * SCOPE, and the decision to leave the membership upsell out.
+ *
+ * ## No membership href, deliberately
+ *
+ * The members calendar's empty state offers "My membership", which is right
+ * where it stands. On a classroom it would sell a membership to somebody who
+ * bought a course, so nothing is passed and the button does not render. That is
+ * the default in `MemberCallsCalendar`, not a special case here.
+ *
+ * ## Scope
+ *
+ * `courseId` and `cohortId` are intersected server-side with the audience keys
+ * the caller actually holds, so they narrow and never unlock. Passing BOTH is
+ * the classroom's case and is not redundant: a cohort student's schedule is
+ * their cohort's sessions PLUS anything addressed to everyone who bought the
+ * course. A sibling cohort's sessions are excluded because its key is not in
+ * the intersection.
+ */
+export function CourseCallsSection({
+  courseId,
+  cohortId,
+  title,
+  getCallHref,
+  navigate,
+  className,
+  style,
+}: CourseCallsSectionProps) {
+  const translate = useForgeT();
+  const t = useThemeTokens();
+  const { isAuthenticated, isInitialized } = usePublicAuth();
+
+  // Nothing to scope by means nothing to show. Rendering the calendar unscoped
+  // here would quietly put the viewer's WHOLE schedule - other courses, the
+  // membership AMA - on one course's page.
+  if (!courseId && !cohortId) return null;
+
+  /**
+   * A seat is minted against an ACCOUNT, so there is nothing to show a reader we
+   * cannot identify: the cohort page is anonymous to the public, and a legacy
+   * course grant opens for anyone holding the link. Rendering the calendar
+   * anyway would fire an authenticated read, take a 401, and put "we could not
+   * load your calls" on a page that is working perfectly.
+   *
+   * `isInitialized` as well, because the session is restored in an effect - a
+   * render before it lands looks signed-out to every child.
+   */
+  if (!isInitialized || !isAuthenticated) return null;
+
+  return (
+    <section
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 12, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>{title ?? translate("forge.course_calls.title")}</h2>
+      <MemberCallsCalendar
+        courseId={courseId}
+        cohortId={cohortId}
+        getCallHref={getCallHref}
+        navigate={navigate}
+      />
+    </section>
+  );
+}

package/src/ui/styled/CourseDetail.tsx

@@ -62,7 +62,7 @@ export function CourseDetail({
 
   return (
     <div
-      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      className={`fg:pb-32 fg:md:pb-0${className ? ` ${className}` : ""}`}
       style={{ maxWidth: 1040, margin: "0 auto", color: tokens.text, ...style }}
     >
       {introVideo ? (
@@ -81,8 +81,8 @@ export function CourseDetail({
         )
       )}
 
-      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
-        <div className="flex-1 min-w-0">
+      <div className="fg:flex fg:flex-col fg:md:flex-row fg:md:items-start fg:gap-6 fg:mt-6">
+        <div className="fg:flex-1 fg:min-w-0">
           <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: tokens.headingFontFamily }}>{course.title}</h1>
 
           {course.description && (
@@ -127,7 +127,7 @@ export function CourseDetail({
         </div>
 
         <aside
-          className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
+          className="fg:fixed fg:bottom-0 fg:left-0 fg:right-0 fg:z-40 fg:w-full fg:md:sticky fg:md:top-4 fg:md:bottom-auto fg:md:left-auto fg:md:right-auto fg:md:w-[300px] fg:md:shrink-0 fg:flex fg:flex-col fg:gap-3"
           style={{
             padding: 16,
             border: `1px solid ${tokens.primary}80`,

package/src/ui/styled/EventDetail.tsx

@@ -81,7 +81,7 @@ export function EventDetail({
 
   return (
     <div
-      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      className={`fg:pb-32 fg:md:pb-0${className ? ` ${className}` : ""}`}
       style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
     >
       {cover && (
@@ -98,8 +98,8 @@ export function EventDetail({
         />
       )}
 
-      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
-        <div className="flex-1 min-w-0">
+      <div className="fg:flex fg:flex-col fg:md:flex-row fg:md:items-start fg:gap-6 fg:mt-6">
+        <div className="fg:flex-1 fg:min-w-0">
           <div style={{ marginBottom: 20 }}>
             <EventCountdown dateTime={event.dateTime} timezone={event.timezone} />
           </div>
@@ -152,7 +152,7 @@ export function EventDetail({
             which is the shape most presales are announced in. */}
         {(event.tickets.length > 0 || presale.visible) && (
           <aside
-            className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
+            className="fg:fixed fg:bottom-0 fg:left-0 fg:right-0 fg:z-40 fg:w-full fg:md:sticky fg:md:top-4 fg:md:bottom-auto fg:md:left-auto fg:md:right-auto fg:md:w-[300px] fg:md:shrink-0 fg:flex fg:flex-col fg:gap-3"
             style={{
               padding: 16,
               border: `1px solid ${t.primary}80`,

package/src/ui/styled/FormRenderer.tsx

@@ -186,10 +186,20 @@ export function FieldInput({
     case "yes_no":
       control = (
         <div style={{ display: "flex", gap: 16 }}>
-          {["Yes", "No"].map((opt) => (
-            <label key={opt} style={{ display: "flex", alignItems: "center", gap: 6 }}>
-              <input type="radio" name={field.id} checked={value === opt} onChange={() => onChange(opt)} />
-              {opt}
+          {/* Stored value is lowercase "yes"/"no": edge conditions, quiz grading and
+              the automation trigger coercion all compare against that, not the label. */}
+          {[
+            { optValue: "yes", optLabel: "Yes" },
+            { optValue: "no", optLabel: "No" },
+          ].map(({ optValue, optLabel }) => (
+            <label key={optValue} style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <input
+                type="radio"
+                name={field.id}
+                checked={value === optValue}
+                onChange={() => onChange(optValue)}
+              />
+              {optLabel}
             </label>
           ))}
         </div>

package/src/ui/styled/PaystackPayButton.tsx

@@ -51,7 +51,7 @@ export function PaystackPayButton({ onPay, amount, currency, label, disabled, cl
           setIsOpening(false);
         }
       }}
-      className={className ?? "w-full px-4 py-3 font-semibold"}
+      className={className ?? "fg:w-full fg:px-4 fg:py-3 fg:font-semibold"}
       style={{
         backgroundColor: theme.colors.primary,
         color: readableTextOn(theme.colors.primary),

package/src/ui/styled/PodcastEpisode.tsx

@@ -99,7 +99,7 @@ export function PodcastEpisode({
       {/* Show notes. `rich-text` = shared baseline content styles (WYSIWYG
           with the editor), bundled with Forge via the ./rich-text.css import. */}
       <div
-        className="rich-text"
+        className="fg:rich-text"
         style={{ lineHeight: 1.7, marginTop: 8, borderTop: `1px solid ${border}`, paddingTop: 18 }}
         dangerouslySetInnerHTML={{ __html: episode.content }}
       />

package/src/ui/styled/ProductDetail.tsx

@@ -246,7 +246,7 @@ function StandardDetail({
   return (
     <>
       <div
-        className={`grid grid-cols-1 md:grid-cols-2 gap-8${className ? ` ${className}` : ""}`}
+        className={`fg:grid fg:grid-cols-1 fg:md:grid-cols-2 fg:gap-8${className ? ` ${className}` : ""}`}
         style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
       >
         {/* Gallery */}
@@ -469,7 +469,7 @@ function StandardDetail({
       {/* Mobile sticky Add-to-cart (only when the inline one is scrolled past). */}
       {showSticky && !isCartOpen && (
         <div
-          className="md:hidden"
+          className="fg:md:hidden"
           style={{
             position: "fixed",
             bottom: 0,
@@ -583,10 +583,10 @@ function MusicDetail({
       <div style={{ border, borderRadius: t.cornerRadius }}>
         {/* Header */}
         <div style={{ padding: 24, borderBottom: border }}>
-          <div className="flex flex-col md:flex-row" style={{ gap: 24 }}>
+          <div className="fg:flex fg:flex-col fg:md:flex-row" style={{ gap: 24 }}>
             {/* Cover + play overlay */}
             <div style={{ position: "relative", flexShrink: 0 }}>
-              <div className="w-full md:w-64 md:h-64" style={{ aspectRatio: "1 / 1", borderRadius: t.cornerRadius, overflow: "hidden", background: t.primary }}>
+              <div className="fg:w-full fg:md:w-64 fg:md:h-64" style={{ aspectRatio: "1 / 1", borderRadius: t.cornerRadius, overflow: "hidden", background: t.primary }}>
                 {cover ? (
                   <img src={cover} alt={product.title} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                 ) : (