@tribe-nest/forge 1.13.0

package/src/ui/styled/LeadMagnet.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { useLeadMagnetConfirm, useTrackLeadMagnetDownload } from "../../data/queries/useLeadMagnet";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface LeadMagnetProps {
+  /** Lead magnet id (route param). */
+  leadMagnetId: string;
+  /** Subscriber id from the delivery link (URL search param). */
+  subscriberId?: string;
+}
+
+/** Lead magnet delivery / download screen. Built on `useLeadMagnetConfirm` + `useTrackLeadMagnetDownload`. */
+export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
+  const theme = useForgeTheme();
+  const trackDownload = useTrackLeadMagnetDownload();
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const { data, isLoading, isError } = useLeadMagnetConfirm(leadMagnetId, subscriberId);
+  const leadMagnet = data?.leadMagnet;
+  const profile = data?.profile;
+
+  const state: "loading" | "success" | "error" =
+    !leadMagnetId || !subscriberId || isError ? "error" : isLoading ? "loading" : "success";
+
+  const handleDownload = async () => {
+    if (!leadMagnet) return;
+    setIsDownloading(true);
+    try {
+      await trackDownload.mutateAsync({ leadMagnetId, subscriberId });
+      const fileUrl = leadMagnet.media?.[0]?.url;
+      if (fileUrl && typeof document !== "undefined") {
+        const link = document.createElement("a");
+        link.href = fileUrl;
+        link.download = leadMagnet.media?.[0]?.filename || "download";
+        link.target = "_blank";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    } catch {
+      // download tracking failed but still allow download
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const wrap: React.CSSProperties = {
+    maxWidth: 480,
+    margin: "0 auto",
+    textAlign: "center",
+    color: theme.colors.text,
+  };
+
+  if (state === "loading") return <Loading fullPage />;
+
+  if (state === "error") {
+    return (
+      <div style={wrap}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Oops!</h1>
+        <p>{!leadMagnetId || !subscriberId ? "Invalid link" : "This link is invalid or has expired."}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={wrap}>
+      {profile && <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 8 }}>{profile.name}</p>}
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
+        {leadMagnet?.thankYouMessage || "Thank you for subscribing!"}
+      </h1>
+      <p style={{ opacity: 0.8, marginBottom: 32 }}>
+        Your download is ready. Click the button below to get your file.
+      </p>
+      <button
+        onClick={handleDownload}
+        disabled={isDownloading}
+        style={{
+          padding: "12px 32px",
+          borderRadius: theme.cornerRadius,
+          border: "none",
+          fontWeight: 600,
+          cursor: isDownloading ? "default" : "pointer",
+          opacity: isDownloading ? 0.5 : 1,
+          background: theme.colors.primary,
+          color: theme.colors.background,
+        }}
+      >
+        {isDownloading ? "Preparing…" : "Download Now"}
+      </button>
+    </div>
+  );
+}

package/src/ui/styled/Loading.tsx

@@ -0,0 +1,56 @@
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+export interface LoadingProps {
+  /** Spinner diameter in px. */
+  size?: number;
+  /** Optional caption under the spinner. */
+  label?: string;
+  /** Center it in a tall block (for full-page/route loading states). */
+  fullPage?: boolean;
+}
+
+const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16).padStart(2, "0");
+
+/** Themed loading spinner — drop-in from `@tribe-nest/forge/ui`. */
+export function Loading({ size = 28, label, fullPage }: LoadingProps) {
+  const theme = useForgeTheme();
+  const border = Math.max(2, Math.round(size / 9));
+
+  const content = (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <style>{"@keyframes forge-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.forge-spin{animation-duration:1.6s}}"}</style>
+      <span
+        className="forge-spin"
+        style={{
+          display: "inline-block",
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          border: `${border}px solid ${alpha(theme.colors.primary, 0.2)}`,
+          borderTopColor: theme.colors.primary,
+          animation: "forge-spin .7s linear infinite",
+        }}
+      />
+      {label && <span style={{ fontSize: 14, opacity: 0.7 }}>{label}</span>}
+      {!label && <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>Loading</span>}
+    </div>
+  );
+
+  if (fullPage) {
+    return <div style={{ minHeight: "40vh", display: "grid", placeItems: "center" }}>{content}</div>;
+  }
+  return content;
+}

package/src/ui/styled/LoginForm.tsx

@@ -0,0 +1,134 @@
+import { useLoginFlow } from "../headless/auth/useLoginFlow";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+export interface LoginFormProps {
+  /** Called after a successful login. The shell typically redirects here. */
+  onSuccess?: (smartLinkPath?: string) => void;
+  /** Href for the "Sign up" link. */
+  signupHref: string;
+  /** Href for the "Forgot password?" link. */
+  forgotHref: string;
+}
+
+/** Themed 2FA login form (credentials → emailed code), built on `useLoginFlow`. */
+export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps) {
+  const theme = useForgeTheme();
+  const flow = useLoginFlow({ onSuccess });
+
+  const card: React.CSSProperties = {
+    maxWidth: 420,
+    margin: "40px auto 0",
+    padding: 24,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+  };
+  const input: React.CSSProperties = {
+    width: "100%",
+    height: 40,
+    padding: "8px 12px",
+    borderRadius: theme.cornerRadius,
+    border: `1px solid ${theme.colors.primary}40`,
+    background: "transparent",
+    color: theme.colors.text,
+    outline: "none",
+  };
+  const button: React.CSSProperties = {
+    width: "100%",
+    padding: "10px 14px",
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.primary,
+    color: theme.colors.background,
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+  const link: React.CSSProperties = { color: theme.colors.primary, textDecoration: "underline" };
+
+  if (flow.step === "code") {
+    return (
+      <div style={card}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>Verify your email</h1>
+        <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 24 }}>
+          We sent a 6-digit code to <strong>{flow.email}</strong>
+        </p>
+        {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            flow.submitCode();
+          }}
+          style={{ display: "flex", flexDirection: "column", gap: 16 }}
+        >
+          <input
+            type="text"
+            inputMode="numeric"
+            maxLength={6}
+            placeholder="000000"
+            autoFocus
+            value={flow.code}
+            onChange={(e) => flow.setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+            style={{ ...input, textAlign: "center", fontSize: 24, letterSpacing: "0.4em" }}
+          />
+          <button type="submit" disabled={flow.isSubmitting || flow.code.length !== 6} style={button}>
+            {flow.isSubmitting ? "Verifying…" : "Verify & Sign In"}
+          </button>
+        </form>
+        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 16, fontSize: 14 }}>
+          <button type="button" onClick={flow.back} style={{ ...link, background: "none", border: "none", cursor: "pointer" }}>
+            Back to login
+          </button>
+          <button
+            type="button"
+            onClick={flow.resend}
+            disabled={flow.isSubmitting}
+            style={{ ...link, background: "none", border: "none", cursor: "pointer" }}
+          >
+            Resend code
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={card}>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Login</h1>
+      {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          flow.submitCredentials();
+        }}
+        style={{ display: "flex", flexDirection: "column", gap: 16 }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14 }}>Email</label>
+          <input type="email" placeholder="Email" value={flow.email} onChange={(e) => flow.setEmail(e.target.value)} style={input} />
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14 }}>Password</label>
+          <input
+            type="password"
+            placeholder="Password"
+            value={flow.password}
+            onChange={(e) => flow.setPassword(e.target.value)}
+            style={input}
+          />
+          <a href={forgotHref} style={{ ...link, fontSize: 13 }}>
+            Forgot password?
+          </a>
+        </div>
+        <button type="submit" disabled={flow.isSubmitting} style={button}>
+          {flow.isSubmitting ? "Sending code…" : "Login"}
+        </button>
+      </form>
+      <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
+        Don&apos;t have an account?{" "}
+        <a href={signupHref} style={link}>
+          Sign up
+        </a>
+      </p>
+    </div>
+  );
+}

package/src/ui/styled/Markdown.tsx

@@ -0,0 +1,103 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { CSSProperties } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+/**
+ * Renders assistant text as Markdown. The agent produces lists, bullets, code,
+ * links, and the occasional table — formatting those is the difference between
+ * a chat surface and a wall of plaintext.
+ *
+ * Forge is a standalone SDK (no Tailwind on code-generated sites), so unlike the
+ * admin Mira renderer this styles every element with inline styles driven by the
+ * Forge theme. GFM gives us tables + task lists.
+ */
+export function Markdown({ children }: { children: string }) {
+  const theme = useForgeTheme();
+  const text = theme.colors.text;
+  const accent = theme.colors.primary;
+  const subtle = `${text}14`; // ~8% overlay for code/quote backgrounds
+  const border = `${text}26`;
+
+  const codeBase: CSSProperties = {
+    fontFamily:
+      'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+    background: subtle,
+    borderRadius: 4,
+  };
+
+  return (
+    <div style={{ fontSize: 14, lineHeight: 1.55, wordBreak: "break-word" }}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          p: ({ children }) => <p style={{ margin: "6px 0" }}>{children}</p>,
+          ul: ({ children }) => (
+            <ul style={{ margin: "6px 0", paddingLeft: 20, display: "flex", flexDirection: "column", gap: 2 }}>
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol style={{ margin: "6px 0", paddingLeft: 20, display: "flex", flexDirection: "column", gap: 2 }}>
+              {children}
+            </ol>
+          ),
+          li: ({ children }) => <li style={{ lineHeight: 1.5 }}>{children}</li>,
+          h1: ({ children }) => <h1 style={{ fontSize: 18, fontWeight: 600, margin: "8px 0 4px" }}>{children}</h1>,
+          h2: ({ children }) => <h2 style={{ fontSize: 16, fontWeight: 600, margin: "8px 0 4px" }}>{children}</h2>,
+          h3: ({ children }) => <h3 style={{ fontSize: 14, fontWeight: 600, margin: "6px 0 4px" }}>{children}</h3>,
+          h4: ({ children }) => <h4 style={{ fontSize: 14, fontWeight: 600, margin: "6px 0 4px" }}>{children}</h4>,
+          strong: ({ children }) => <strong style={{ fontWeight: 600 }}>{children}</strong>,
+          em: ({ children }) => <em style={{ fontStyle: "italic" }}>{children}</em>,
+          a: ({ href, children }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer noopener"
+              style={{ color: accent, textDecoration: "underline", textUnderlineOffset: 2 }}
+            >
+              {children}
+            </a>
+          ),
+          code: ({ children, ...props }) => {
+            const inline = !(props as { className?: string }).className;
+            if (inline) {
+              return <code style={{ ...codeBase, padding: "1px 5px", fontSize: "0.85em" }}>{children}</code>;
+            }
+            return (
+              <code style={{ ...codeBase, display: "block", padding: "8px 10px", fontSize: 12, overflowX: "auto" }}>
+                {children}
+              </code>
+            );
+          },
+          pre: ({ children }) => (
+            <pre style={{ ...codeBase, padding: 10, fontSize: 12, overflowX: "auto", margin: "6px 0" }}>{children}</pre>
+          ),
+          blockquote: ({ children }) => (
+            <blockquote
+              style={{ borderLeft: `3px solid ${border}`, paddingLeft: 10, margin: "6px 0", opacity: 0.9 }}
+            >
+              {children}
+            </blockquote>
+          ),
+          hr: () => <hr style={{ border: 0, borderTop: `1px solid ${border}`, margin: "10px 0" }} />,
+          table: ({ children }) => (
+            <div style={{ overflowX: "auto", margin: "6px 0" }}>
+              <table style={{ fontSize: 12, borderCollapse: "collapse", width: "100%" }}>{children}</table>
+            </div>
+          ),
+          th: ({ children }) => (
+            <th style={{ border: `1px solid ${border}`, background: subtle, padding: "4px 8px", textAlign: "left", fontWeight: 600 }}>
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td style={{ border: `1px solid ${border}`, padding: "4px 8px", verticalAlign: "top" }}>{children}</td>
+          ),
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/ui/styled/MembershipCheckout.tsx

@@ -0,0 +1,197 @@
+import type { CSSProperties } from "react";
+import { useMembershipCheckout } from "../headless/membership/useMembershipCheckout";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { priceTaxCaption } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { readableTextOn } from "../theme/contrast";
+import { Loading } from "./Loading";
+
+export interface MembershipCheckoutProps {
+  /** Pre-selected tier (e.g. from a `?membershipTierId=` param). */
+  initialTierId?: string;
+  /**
+   * Called on a successful subscription (free activation, or after a paid
+   * payment succeeds) — the host navigates however it wants (e.g. to the account
+   * page). Omit to fall back to Forge's default `window.location` redirect.
+   */
+  onComplete?: () => void;
+  /** The URL Stripe returns to for a PAID subscription (its `return_url`, and the
+   * free/paid fallback redirect). Default `/i/account?tab=membership&confirmSubscription=true`. */
+  successPath?: string;
+  /** Where the "View memberships" link points when no tier is selected. Default `/i/membership`. */
+  membershipsPath?: string;
+  /** Format a numeric amount for display. Defaults to the runtime currency formatter. */
+  formatAmount?: (amount: number) => string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Themed membership subscribe — the full flow (tier summary → billing cycle /
+ * pay-what-you-want → payment) on `useMembershipCheckout`. Free tiers activate
+ * immediately; paid tiers render the registered payment UI (Stripe, manual mode).
+ * A single drop-in reused by every site so the flow is fixed in one place.
+ */
+export function MembershipCheckout({
+  initialTierId,
+  onComplete,
+  successPath = "/i/account?tab=membership&confirmSubscription=true",
+  membershipsPath = "/i/membership",
+  formatAmount,
+  className,
+  style,
+}: MembershipCheckoutProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  // Memberships have no checkout tax quote (subscription rail) — inclusive
+  // stores still caption the displayed price as tax-inclusive (display only).
+  const taxCaption = priceTaxCaption({ pricesIncludeTax: usePricesIncludeTax() });
+  const renderPayment = usePaymentRenderer();
+  const checkout = useMembershipCheckout({
+    initialTierId,
+    returnPath: successPath,
+    freeReturnPath: successPath,
+    onComplete,
+  });
+
+  const card: CSSProperties = { maxWidth: 560, margin: "0 auto", color: theme.colors.text, ...style };
+  const box: CSSProperties = {
+    border: `1px solid ${theme.colors.primary}30`,
+    borderRadius: theme.cornerRadius,
+    padding: 24,
+    marginBottom: 24,
+  };
+  const button: CSSProperties = {
+    width: "100%",
+    padding: "10px 14px",
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.primary,
+    color: readableTextOn(theme.colors.primary),
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+
+  if (checkout.isLoading) return <Loading fullPage />;
+
+  const tier = checkout.selectedTier;
+  if (!tier) {
+    return (
+      <div className={className} style={card}>
+        <p>Select a membership tier to continue.</p>
+        <a href={membershipsPath} style={{ ...button, marginTop: 16, display: "inline-block", textAlign: "center", textDecoration: "none" }}>
+          View memberships
+        </a>
+      </div>
+    );
+  }
+
+  // Payment step — render the registered payment UI (Stripe) in manual mode.
+  if (checkout.step === "payment" && checkout.clientSecret) {
+    return (
+      <div className={className} style={card}>
+        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>Payment</h1>
+        <p style={{ opacity: 0.75, marginBottom: 24 }}>
+          {tier.name} — {fmt(checkout.amount)} / {checkout.billingCycle}
+        </p>
+        <div style={box}>
+          {renderPayment({
+            clientSecret: checkout.clientSecret,
+            returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
+            amount: checkout.amount,
+            mode: "manual",
+            onSucceeded: () => onComplete?.(),
+            onFailed: () => {},
+          })}
+        </div>
+        <button
+          onClick={() => checkout.setStep("select")}
+          style={{ ...button, background: "transparent", color: theme.colors.text, border: `1px solid ${theme.colors.primary}40` }}
+        >
+          Back
+        </button>
+      </div>
+    );
+  }
+
+  const showBillingToggle = !tier.payWhatYouWant && !!tier.priceMonthly && !!tier.priceYearly;
+
+  return (
+    <div className={className} style={card}>
+      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>Join {tier.name}</h1>
+
+      <div style={box}>
+        {tier.description && <p style={{ marginBottom: 16 }}>{tier.description}</p>}
+        {!!tier.benefits?.length && (
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+            {tier.benefits.map((b) => (
+              <li key={b.id} style={{ display: "flex", gap: 8 }}>
+                <span style={{ color: theme.colors.primary }}>✓</span>
+                {b.title}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div style={box}>
+        {showBillingToggle && (
+          <div style={{ marginBottom: 16 }}>
+            <p style={{ fontSize: 14, marginBottom: 8 }}>Billing cycle</p>
+            <div style={{ display: "flex", gap: 16 }}>
+              {(["month", "year"] as const).map((cycle) => (
+                <label key={cycle} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
+                  <input
+                    type="radio"
+                    name="billingCycle"
+                    checked={checkout.billingCycle === cycle}
+                    onChange={() => checkout.setBillingCycle(cycle)}
+                    style={{ accentColor: theme.colors.primary }}
+                  />
+                  {cycle === "month" ? "Monthly" : "Yearly"}
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {tier.payWhatYouWant && (
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ fontSize: 14, display: "block", marginBottom: 8 }}>How much would you like to pay?</label>
+            <input
+              type="number"
+              min={tier.payWhatYouWantMinimum ?? 0}
+              value={checkout.customAmount || ""}
+              onChange={(e) => checkout.setCustomAmount(Number(e.target.value))}
+              style={{
+                width: "100%",
+                height: 40,
+                padding: "8px 12px",
+                borderRadius: theme.cornerRadius,
+                border: `1px solid ${theme.colors.primary}40`,
+                background: "transparent",
+                color: theme.colors.text,
+                outline: "none",
+              }}
+            />
+          </div>
+        )}
+
+        <div style={{ textAlign: "center", paddingTop: 16, borderTop: `1px solid ${theme.colors.primary}20` }}>
+          <p style={{ fontSize: 14, opacity: 0.75 }}>Total</p>
+          <p style={{ fontSize: 28, fontWeight: 800 }}>{fmt(checkout.amount)}</p>
+          <p style={{ fontSize: 14, opacity: 0.75 }}>{checkout.billingCycle === "month" ? "per month" : "per year"}</p>
+          {taxCaption && <p style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{taxCaption}</p>}
+        </div>
+      </div>
+
+      {checkout.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{checkout.error}</p>}
+
+      <button onClick={() => checkout.subscribe()} disabled={checkout.isProcessing} style={button}>
+        {checkout.isProcessing ? "Processing…" : "Subscribe"}
+      </button>
+    </div>
+  );
+}