@tribe-nest/forge 3.48.0 → 3.52.0

package/src/ui/styled/_tests/CohortCheckout.spec.tsx

@@ -0,0 +1,232 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+
+/**
+ * What is under test is the WIRING, and specifically the two things a cohort
+ * checkout gets wrong when nobody pins them.
+ *
+ *  1. THE PLAN IS THE PRICE, so the buyer chooses one before anything else and
+ *     the creator's default is preselected. Guessing the plan would charge a
+ *     buyer for a cadence they did not pick.
+ *  2. THE PAYMENT STEP SHOWS WHAT IS TAKEN TODAY, not the plan total. On a
+ *     three-payment plan those are different numbers, and showing the total
+ *     tells the buyer they are about to be charged three times what they will
+ *     be.
+ *
+ * The modal, the plan cards and the payment step are all driven from
+ * `useCohortCheckout`, so the hook is mocked and the component is exercised.
+ */
+type Plan = {
+  id: string;
+  title: string;
+  currency: string;
+  totalAmount: string | number;
+  installmentCount: number;
+  intervalDays: number;
+  isDefault: boolean;
+};
+
+const PLANS: Plan[] = [
+  {
+    id: "p1",
+    title: "Pay in full",
+    currency: "USD",
+    totalAmount: 600,
+    installmentCount: 1,
+    intervalDays: 0,
+    isDefault: true,
+  },
+  {
+    id: "p2",
+    title: "Three payments",
+    currency: "USD",
+    totalAmount: 660,
+    installmentCount: 3,
+    intervalDays: 30,
+    isDefault: false,
+  },
+];
+
+const state: Record<string, unknown> = {};
+const choosePlan = vi.fn();
+const setStep = vi.fn();
+const enrol = vi.fn();
+
+vi.mock("../../headless/cohort/useCohortCheckout", () => ({
+  useCohortCheckout: () => state,
+}));
+
+/*
+ * Both reached through `useAmountFormatter`, which resolves the viewer's
+ * currency. Neither is what this file is about, and standing real providers up
+ * here would be scaffolding around the two assertions that matter.
+ */
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => ({ isAuthenticated: false, isInitialized: true, user: null }),
+}));
+/*
+ * The NARROW seam, deliberately. Mocking `ForgeProvider` itself also replaced
+ * `useForge` for every other spec sharing this worker, and took
+ * `paymentFlowReturnUrl.spec` down with it. `useSiteConfig` is the only thing
+ * the formatter actually needs from that direction.
+ */
+vi.mock("../../../data/queries/useWebsite", () => ({
+  useSiteConfig: () => ({ data: { currency: "USD" }, isLoading: false }),
+}));
+
+const { CohortCheckout } = await import("../CohortCheckout");
+
+const base = () => ({
+  cohort: { id: "c1", title: "Spring cohort" },
+  course: { id: "co1", title: "The programme" },
+  isLoading: false,
+  plans: PLANS,
+  selectedPlan: PLANS[0],
+  planId: "p1",
+  choosePlan,
+  step: "plan",
+  setStep,
+  firstName: "",
+  setFirstName: vi.fn(),
+  lastName: "",
+  setLastName: vi.fn(),
+  email: "",
+  setEmail: vi.fn(),
+  questionnaire: undefined,
+  setQuestionnaire: vi.fn(),
+  enrol,
+  clientSecret: undefined,
+  isPaystack: false,
+  canOpenPaystack: false,
+  openPaystackCheckout: vi.fn(),
+  totalAmount: 600,
+  installmentAmount: undefined,
+  installmentCount: 1,
+  setupRequiresAction: false,
+  setupClientSecret: null,
+  taxQuote: null,
+  returnUrl: "",
+  isProcessing: false,
+  error: null,
+});
+
+/** The provider takes no default, so every spec here supplies one. */
+const THEME = {
+  colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" },
+  cornerRadius: 8,
+};
+
+/**
+ * A REAL query client rather than a fourth mock. `useAmountFormatter` reaches a
+ * currency query, and stubbing every provider between here and it would leave a
+ * spec that passes because of its scaffolding. No retries, so a query that does
+ * fire fails fast instead of holding the test open.
+ */
+const wrap = (node: React.ReactNode) => (
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <ForgeThemeProvider theme={THEME}>{node}</ForgeThemeProvider>
+  </QueryClientProvider>
+);
+
+/**
+ * `formatAmount` is supplied rather than left to `useAmountFormatter`, which
+ * resolves the viewer's currency through a query this spec has no server for.
+ * What is under test is WHICH figure is shown, not how it is punctuated.
+ */
+const fmt = (n: number) => `$${n}`;
+
+const draw = () => render(wrap(<CohortCheckout cohortId="c1" formatAmount={fmt} />));
+
+const open = () => fireEvent.click(screen.getByText("Enrol"));
+
+beforeEach(() => {
+  Object.keys(state).forEach((k) => delete state[k]);
+  Object.assign(state, base());
+  choosePlan.mockClear();
+  setStep.mockClear();
+  enrol.mockClear();
+});
+
+afterEach(cleanup);
+
+describe("CohortCheckout", () => {
+  it("renders nothing at all when the cohort has no pricing plans", () => {
+    // Not an error state: a cohort that is not priced yet. A dead "Enrol"
+    // button would be worse than no button.
+    Object.assign(state, { plans: [], selectedPlan: undefined });
+    const { queryByText } = draw();
+    // The theme provider injects its own :root style block, so the absence to
+    // assert is the TRIGGER, not an empty container.
+    expect(queryByText("Enrol")).toBeNull();
+  });
+
+  it("opens on plan choice, and offers every plan the creator priced", () => {
+    draw();
+    open();
+    expect(screen.getByText("Choose a plan")).toBeTruthy();
+    // "Pay in full" is both the plan's TITLE and, for a one-payment plan, its
+    // terms line, so it legitimately appears twice on the same card.
+    expect(screen.getAllByText("Pay in full").length).toBeGreaterThan(0);
+    expect(screen.getByText("Three payments")).toBeTruthy();
+  });
+
+  it("spells out an instalment plan's terms rather than only its total", () => {
+    draw();
+    open();
+    // The per-payment figure and the cadence, because "660" alone does not tell
+    // a buyer what leaves their account or when.
+    expect(screen.getByText(/3 payments of/)).toBeTruthy();
+    expect(screen.getByText(/every 30 days/)).toBeTruthy();
+  });
+
+  it("passes the chosen plan up rather than assuming one", () => {
+    draw();
+    open();
+    fireEvent.click(screen.getByText("Three payments"));
+    expect(choosePlan).toHaveBeenCalledWith("p2");
+  });
+
+  it("shows what is taken TODAY on an instalment plan, not the plan total", () => {
+    Object.assign(state, {
+      step: "payment",
+      selectedPlan: PLANS[1],
+      planId: "p2",
+      totalAmount: 660,
+      installmentAmount: 220,
+      installmentCount: 3,
+    });
+    const { baseElement } = draw();
+    open();
+
+    expect(screen.getByText("Due now")).toBeTruthy();
+    // 220 is the charge; 660 is the commitment. Both appear, and the figure
+    // beside "Due now" is the one about to leave the buyer's card. Read off the
+    // whole dialog because the formatter splits the amount across nodes.
+    expect(baseElement.textContent).toContain("220");
+    expect(baseElement.textContent).toContain("660");
+    expect(screen.getByText(/3 payments in total/)).toBeTruthy();
+  });
+
+  it("asks for the off-session consent when Stripe needs it confirmed", () => {
+    // Instalments 2..n are charged months later by a cron with nobody present.
+    // A checkout that skips this takes payment one and silently fails the rest.
+    const renderPayment = vi.fn(() => <div>card form</div>);
+    Object.assign(state, {
+      step: "payment",
+      selectedPlan: PLANS[1],
+      installmentCount: 3,
+      installmentAmount: 220,
+      setupRequiresAction: true,
+      setupClientSecret: "seti_123_secret",
+    });
+    render(wrap(<CohortCheckout cohortId="c1" formatAmount={fmt} renderPayment={renderPayment} />));
+    open();
+
+    expect(screen.getByText(/Authorise the later payments/)).toBeTruthy();
+    expect(renderPayment).toHaveBeenCalledWith(expect.objectContaining({ clientSecret: "seti_123_secret" }));
+  });
+});

package/src/ui/styled/_tests/CourseCallsSection.spec.tsx

@@ -0,0 +1,163 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { MyMembershipCall } from "../../../data/queries/useMembershipCalls";
+
+/**
+ * The section is a WRAPPER, so the mock goes under the whole chain
+ * (`MemberCallsCalendar` -> `useMemberCalls` -> `useMyMembershipCalls`) rather
+ * than over the calendar itself. That is the point of the file: what is under
+ * test is the wiring - which scope reaches the query, which empty state the
+ * student is shown, and which call id Join opens - not the month grid, which
+ * has its own spec.
+ */
+const rows: MyMembershipCall[] = [];
+const useMyMembershipCalls = vi.fn();
+
+vi.mock("../../../data/queries/useMembershipCalls", () => ({
+  useMyMembershipCalls: (options: unknown) => useMyMembershipCalls(options),
+}));
+
+let session = { isAuthenticated: true, isInitialized: true };
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => session,
+}));
+
+const { CourseCallsSection } = await import("../CourseCallsSection");
+
+/**
+ * A day inside the month the grid opens on.
+ *
+ * `useMemberCalls` lays out the six weeks around the REAL clock and buckets
+ * calls into them by the viewer's local day, so a call pinned to a fixed
+ * calendar date falls outside the grid the moment that month passes and every
+ * assertion here goes quietly green-then-red. Built from `now` instead.
+ */
+const at = (hour: number): Date => {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 15, hour, 0, 0);
+};
+
+const call = (over: Partial<MyMembershipCall> = {}): MyMembershipCall => ({
+  id: "call-1",
+  title: "Week 1 kickoff",
+  description: "Bring your questions.",
+  startsAt: at(17).toISOString(),
+  endsAt: at(18).toISOString(),
+  timezone: "America/New_York",
+  participation: "open",
+  role: "attendee",
+  audiences: [{ id: "a1", audienceType: "course_cohort", audienceId: "cohort-1", label: "March cohort" }],
+  opensAt: at(16).toISOString(),
+  closesAt: at(20).toISOString(),
+  isOpen: true,
+  callPublicId: "pub-week-1",
+  recording: null,
+  ...over,
+});
+
+const mount = (props: Record<string, unknown> = {}, navigate = vi.fn()) => {
+  const view = render(
+    <ForgeThemeProvider theme={{ colors: { text: "#111", background: "#fff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+      <CourseCallsSection courseId="course-1" cohortId="cohort-1" navigate={navigate} {...props} />
+    </ForgeThemeProvider>,
+  );
+  return { ...view, navigate };
+};
+
+beforeEach(() => {
+  rows.length = 0;
+  session = { isAuthenticated: true, isInitialized: true };
+  useMyMembershipCalls.mockReset();
+  useMyMembershipCalls.mockImplementation(() => ({
+    data: rows,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+  }));
+});
+
+afterEach(cleanup);
+
+describe("CourseCallsSection", () => {
+  it("renders the student's calls under a heading", () => {
+    rows.push(call());
+    const { getAllByText } = mount();
+    expect(getAllByText("Live calls").length).toBe(1);
+    // Desktop grid cell and mobile agenda row are both in the DOM; the
+    // calendar renders both faces and hides one with a media class.
+    expect(getAllByText("Week 1 kickoff").length).toBeGreaterThan(0);
+  });
+
+  it("scopes the read to the course AND the cohort being viewed", () => {
+    rows.push(call());
+    mount();
+    const options = useMyMembershipCalls.mock.calls[0]![0] as { courseId?: string; cohortId?: string };
+    expect(options.courseId).toBe("course-1");
+    expect(options.cohortId).toBe("cohort-1");
+  });
+
+  it("passes only the cohort when that is all the surface knows", () => {
+    mount({ courseId: null });
+    const options = useMyMembershipCalls.mock.calls[0]![0] as { courseId?: string | null; cohortId?: string };
+    expect(options.courseId).toBeNull();
+    expect(options.cohortId).toBe("cohort-1");
+  });
+
+  it("shows the empty state with NO membership upsell on a course surface", () => {
+    const { getByText, queryByText } = mount();
+    expect(getByText("Nothing this month")).toBeTruthy();
+    // The whole reason this wrapper exists. `MemberCallsCalendar` renders the
+    // button only when it is handed a `membershipHref`, and a course-only buyer
+    // standing in their own classroom must not be sold a membership.
+    expect(queryByText("My membership")).toBeNull();
+  });
+
+  it("links Join to the call's own publicId, on the generic call page", () => {
+    rows.push(call({ callPublicId: "pub-week-1" }));
+    const { getAllByText, getByText, navigate } = mount();
+    fireEvent.click(getAllByText("Week 1 kickoff")[0]!);
+    fireEvent.click(getByText("Join call"));
+    expect(navigate).toHaveBeenCalledWith("/i/video-calls/pub-week-1");
+  });
+
+  it("offers Watch for a past call whose recording is ready", () => {
+    rows.push(
+      call({
+        id: "call-2",
+        title: "Week 0 orientation",
+        isOpen: false,
+        recording: { id: "rec-1", status: "ready", durationSeconds: 3600, watchUrl: "https://cdn.test/rec.mp4" },
+      }),
+    );
+    const { getAllByText, container } = mount();
+    fireEvent.click(getAllByText("Week 0 orientation")[0]!);
+    // Queried by href rather than by text: the label carries the duration in a
+    // second text node, so a text matcher would be matching the minutes too.
+    const watch = container.querySelector<HTMLAnchorElement>('a[href="https://cdn.test/rec.mp4"]');
+    expect(watch?.textContent).toContain("Watch recording");
+  });
+
+  it("renders nothing for a reader with no session, rather than a failed read", () => {
+    // A legacy course grant opens for anyone holding the link, and the cohort
+    // page is anonymous to the public. The attendee endpoint would 401 them, and
+    // "we could not load your calls" on a page that is working perfectly is
+    // worse than no section at all.
+    session = { isAuthenticated: false, isInitialized: true };
+    const { container } = mount();
+    // Not `textContent`: `ForgeThemeProvider` writes a `:root` custom-property
+    // block into the tree, which is there whatever the section does.
+    expect(container.querySelector("section")).toBeNull();
+    expect(useMyMembershipCalls).not.toHaveBeenCalled();
+  });
+
+  it("renders nothing when there is no course or cohort to scope by", () => {
+    // Unscoped here would put the viewer's WHOLE schedule - other courses, the
+    // membership AMA - on one course's page.
+    const { container } = mount({ courseId: null, cohortId: null });
+    expect(container.querySelector("section")).toBeNull();
+    expect(useMyMembershipCalls).not.toHaveBeenCalled();
+  });
+});

package/src/ui/styled/_tests/packagedCssIsCurrent.spec.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { execFileSync } from "node:child_process";
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * The shipped stylesheet must match the components that need it.
+ *
+ * Forge packages its own Tailwind output (`forge-utilities.css`) because a
+ * published site cannot scan Forge's source: the build sandbox hoists forge to
+ * a workspace-root node_modules, the starter's `@source` paths miss, and
+ * Tailwind skips a missing `@source` SILENTLY. So the packaged file is the only
+ * thing standing between a Forge component and an unstyled published page.
+ *
+ * Which makes staleness invisible in exactly the same way. Add a class to a
+ * component, forget `npm run build:css`, and it works locally for ever (the
+ * monorepo `@source` reaches Forge's source) while every published site renders
+ * without it. This runs the build and fails if the committed file would change.
+ */
+describe("Forge's packaged CSS", () => {
+  it("is up to date with the components that use it", () => {
+    const root = join(__dirname, "..", "..", "..", "..");
+    const cssPath = join(root, "src", "ui", "styled", "forge-utilities.css");
+    const before = readFileSync(cssPath, "utf-8");
+
+    try {
+      execFileSync("npm", ["run", "build:css"], { cwd: root, stdio: "pipe" });
+    } catch (err) {
+      throw new Error(`build:css failed, so the packaged CSS cannot be verified: ${String(err)}`);
+    }
+
+    const after = readFileSync(cssPath, "utf-8");
+    // Put the committed file back before asserting, so a failing run does not
+    // leave a rebuilt artifact in the tree and turn one red test into a dirty
+    // working copy.
+    if (before !== after) writeFileSync(cssPath, before);
+
+    expect(
+      after === before,
+      "forge-utilities.css is stale. A class was added to a component without rebuilding, so it is missing from every PUBLISHED site while working locally. Run `npm run build:css` in packages/forge and commit the result.",
+    ).toBe(true);
+  });
+});

package/src/ui/styled/_tests/utilityPrefix.spec.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from "vitest";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * Every Tailwind utility in a Forge component carries the `fg:` prefix.
+ *
+ * THE ONE RULE, and the only one. Forge builds its stylesheet with
+ * `prefix(fg)` (see tailwind.input.css), so `fg:flex` compiles to `.fg\:flex`
+ * and a bare `flex` compiles to NOTHING. An unprefixed class is therefore not a
+ * style that loses an argument, it is a style that does not exist: the element
+ * renders unstyled and no error is raised anywhere.
+ *
+ * WHY THE PREFIX EXISTS. Tailwind utilities are global and unprefixed by
+ * construction, so Forge's `.hidden` and a host's `.hidden` are the same rule.
+ * Shipping Forge's copies bare meant one of the two had to lose everywhere, and
+ * both orderings shipped a bug: Forge above the host collapsed the admin
+ * sidebar (027b8aa9d), Forge below the host pinned a coaching booking page's
+ * "Select availability" card over its cover image on every published site, and
+ * made `hidden sm:block` blocks permanently invisible. A cascade layer picks
+ * one global winner for a name that means different things on different
+ * elements, so it could never settle it. The prefix removes the collision.
+ *
+ * WHAT IS NOT A UTILITY, and must stay bare:
+ *  - the hand-written classes in Forge's own stylesheets (`cf-rise`,
+ *    `forge-rich`, `forge-spin`, …), which are real CSS rules;
+ *  - `group` and `peer`, which are Tailwind MARKERS targeted by `group-*` /
+ *    `peer-*` and never emitted as rules of their own;
+ *  - anything arriving through the `className` PROP, which belongs to the host.
+ */
+
+/** Hand-written CSS in Forge's own stylesheets, plus Tailwind's markers. */
+const NOT_UTILITIES = new Set([
+  "cf-card",
+  "cf-halo",
+  "cf-pop",
+  "cf-ring",
+  "cf-rise",
+  "cf-tick",
+  "forge-community-composer-editable",
+  "forge-pa-compact",
+  "forge-rich",
+  "forge-spin",
+  "group",
+  "peer",
+]);
+
+const PREFIX = "fg:";
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      if (entry !== "_tests") walk(full, out);
+    } else if (full.endsWith(".tsx") || full.endsWith(".ts")) out.push(full);
+  }
+  return out;
+}
+
+/**
+ * The whole `className=` value, braces and backticks balanced.
+ *
+ * A regex cannot do this, and the naive one nearly shipped the bug it is meant
+ * to prevent: `` className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`} ``
+ * contains a NESTED backtick, so a `` /\{`([^`]*)`\}/ `` pattern never matched it
+ * and four components sat unprefixed while the guard reported clean.
+ */
+function classNameExpressions(src: string): Array<{ expr: string; index: number }> {
+  const found: Array<{ expr: string; index: number }> = [];
+  const marker = "className=";
+  for (let i = src.indexOf(marker); i !== -1; i = src.indexOf(marker, i + 1)) {
+    let j = i + marker.length;
+    if (src[j] === '"') {
+      const end = src.indexOf('"', j + 1);
+      if (end === -1) continue;
+      found.push({ expr: src.slice(j, end + 1), index: i });
+      continue;
+    }
+    if (src[j] !== "{") continue;
+    let depth = 0;
+    let inTemplate = false;
+    for (; j < src.length; j += 1) {
+      const ch = src[j];
+      if (ch === "\\") { j += 1; continue; }
+      if (ch === "`") inTemplate = !inTemplate;
+      else if (ch === "{") depth += 1;
+      else if (ch === "}") {
+        depth -= 1;
+        if (depth === 0) break;
+      }
+    }
+    found.push({ expr: src.slice(i + marker.length, j + 1), index: i });
+  }
+  return found;
+}
+
+/** Every literal class token in a className expression, interpolations aside. */
+function classTokens(expr: string): string[] {
+  const tokens: string[] = [];
+
+  // 1. Quoted strings, which is where a ternary keeps its classes:
+  //    `${open ? "fg:flex" : "fg:hidden"}`.
+  for (const m of expr.matchAll(/"([^"]*)"|'([^']*)'/g)) {
+    tokens.push(...(m[1] ?? m[2] ?? "").split(/\s+/));
+  }
+
+  // 2. Template TEXT, with every `${...}` removed first so an interpolation's
+  //    own code can never be mistaken for a class name.
+  let stripped = "";
+  let depth = 0;
+  for (let i = 0; i < expr.length; i += 1) {
+    if (expr[i] === "$" && expr[i + 1] === "{") { depth += 1; i += 1; continue; }
+    if (depth > 0) {
+      if (expr[i] === "{") depth += 1;
+      else if (expr[i] === "}") depth -= 1;
+      continue;
+    }
+    stripped += expr[i];
+  }
+  for (const m of stripped.matchAll(/`([^`]*)`/g)) tokens.push(...(m[1] ?? "").split(/\s+/));
+
+  return tokens.filter(Boolean);
+}
+
+describe("Forge utilities are prefixed", () => {
+  it("has no unprefixed utility in any component", () => {
+    const root = join(__dirname, "..", "..", "..");
+    const offences: string[] = [];
+
+    for (const file of walk(root)) {
+      const src = readFileSync(file, "utf-8");
+      for (const { expr, index } of classNameExpressions(src)) {
+        for (const cls of classTokens(expr)) {
+          if (cls.startsWith(PREFIX) || NOT_UTILITIES.has(cls)) continue;
+          const line = src.slice(0, index).split("\n").length;
+          offences.push(
+            `${file.slice(file.indexOf("packages/"))}:${line} "${cls}" has no fg: prefix, so it compiles to nothing and silently does not apply. Write "fg:${cls}", or add it to NOT_UTILITIES if it is hand-written CSS.`,
+          );
+        }
+      }
+    }
+
+    expect(offences, offences.join("\n")).toEqual([]);
+  });
+
+  it("ships no bare utility in the packaged stylesheet", () => {
+    // The other half, measured on the OUTPUT rather than the source: even if a
+    // component slipped one through, nothing unprefixed may reach a host's page,
+    // because that is the rule a bare class would break.
+    const css = readFileSync(join(__dirname, "..", "forge-utilities.css"), "utf-8");
+    const bare = [...css.matchAll(/^\s*\.([a-zA-Z][a-zA-Z0-9_-]*)\s*(?:,|\{)/gm)]
+      .map((m) => m[1]!)
+      .filter((c) => !c.startsWith("fg") && !NOT_UTILITIES.has(c));
+    expect([...new Set(bare)], "unprefixed rules in the shipped stylesheet").toEqual([]);
+  });
+});

package/src/ui/styled/broadcast/BroadcastMoqStage.tsx

@@ -120,5 +120,5 @@ export function BroadcastMoqStage({ url, name, muted, onFailed }: BroadcastMoqSt
     };
   }, [url, name, muted]);
 
-  return <div ref={hostRef} className="h-full w-full bg-black" />;
+  return <div ref={hostRef} className="fg:h-full fg:w-full fg:bg-black" />;
 }

package/src/ui/styled/chat/ChatThreadPanel.tsx

@@ -48,7 +48,7 @@ export function ChatThreadPanel({
 
   return (
     <section
-      className="fixed inset-0 z-50 md:static md:z-auto md:w-[360px] flex flex-col"
+      className="fg:fixed fg:inset-0 fg:z-50 fg:md:static fg:md:z-auto fg:md:w-[360px] fg:flex fg:flex-col"
       style={{ background: theme.colors.background, borderLeft: border }}
     >
       <header style={{ padding: "12px 16px", borderBottom: border, display: "flex", alignItems: "center", gap: 12 }}>