@tribe-nest/forge 1.13.0

package/src/ui/styled/CoachingConfirmation.tsx

@@ -0,0 +1,151 @@
+import { AlertTriangle, ArrowRight } 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, alpha } from "./Confirmation";
+import { useCoachingBookingFinalize } from "../../data/queries/useFinalize";
+
+export interface CoachingConfirmationProps {
+  slug: string;
+  orderId?: string;
+  /** Formats a monetary amount for display. Defaults to a plain USD-style `$0.00`. */
+  formatAmount?: (n: number) => string;
+  /** Where the "explore more" action links. */
+  explorePath?: string;
+}
+
+// e.g. "Fri, Jul 4 · 2:30 PM EDT" in the visitor's own timezone — matching how
+// the slot picker shows times (localized to the person booking).
+function formatSession(iso: string) {
+  const d = new Date(iso);
+  const day = d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+  const time = d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, timeZoneName: "short" });
+  return `${day} · ${time}`;
+}
+
+export function CoachingConfirmation({
+  slug,
+  orderId,
+  formatAmount,
+  explorePath = "/i/coaching",
+}: CoachingConfirmationProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const { data, isLoading, error } = useCoachingBookingFinalize(slug, orderId);
+
+  const primary = theme.colors.primary;
+  const text = theme.colors.text;
+
+  if (isLoading) {
+    return (
+      <ConfirmationStage>
+        <Loading label="Confirming your booking…" />
+      </ConfirmationStage>
+    );
+  }
+
+  const confirmed = !error && data?.status === "confirmed";
+
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard width={460}>
+        {/* ── Ceremony ── */}
+        <div style={{ padding: "40px 32px 28px", 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 ? "Session Pass" : "Action needed"}
+          </p>
+
+          <h1
+            className="cf-rise"
+            style={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, margin: "0 0 10px", animationDelay: "0.22s" }}
+          >
+            {confirmed ? "You’re booked in." : "Booking not completed"}
+          </h1>
+
+          <p
+            className="cf-rise"
+            style={{ fontSize: 15, lineHeight: 1.5, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}
+          >
+            {confirmed
+              ? `Nice one${data?.firstName ? `, ${data.firstName}` : ""} — your session is confirmed. We’ve sent the details to ${data?.email ?? "your inbox"}.`
+              : `Your booking is currently ${data?.status ?? "unresolved"}. If you were charged, reach out and we’ll sort it right away.`}
+          </p>
+        </div>
+
+        {/* ── Perforated divider ── */}
+        <Perforation />
+
+        {/* ── Stub / details ── */}
+        <div className="cf-rise" style={{ padding: "28px 32px 12px", animationDelay: "0.38s" }}>
+          {data && (
+            <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 14, columnGap: 16, margin: 0 }}>
+              {data.sessionStartTime && (
+                <ConfirmationRow label="Session" value={formatSession(data.sessionStartTime)} accent strong />
+              )}
+              {data.durationMinutes ? <ConfirmationRow label="Duration" value={`${data.durationMinutes} minutes`} /> : null}
+              <ConfirmationRow label="Guest" value={`${data.firstName} ${data.lastName}`.trim() || "—"} />
+              <ConfirmationRow label="Email" value={data.email} />
+              <ConfirmationRow label="Reference" value={`#${data.id.slice(0, 8).toUpperCase()}`} mono />
+              {Number(data.taxAmount || 0) > 0 && !data.taxInclusive && (
+                <ConfirmationRow label="Tax" value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} />
+              )}
+              {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
+              <ConfirmationRow
+                label="Paid"
+                value={
+                  Number(data.totalAmountInChargedCurrency ?? data.totalAmount) > 0
+                    ? data.totalAmountInChargedCurrency
+                      ? fmt(Number(data.totalAmountInChargedCurrency), data.chargedCurrency || undefined)
+                      : fmt(data.totalAmount)
+                    : "Free session"
+                }
+                accent
+                strong
+              />
+            </dl>
+          )}
+          {data && Number(data.taxAmount || 0) > 0 && data.taxInclusive && (
+            <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 6 }}>
+              Includes {fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} tax
+            </div>
+          )}
+        </div>
+
+        {/* ── Actions ── */}
+        <div className="cf-rise" style={{ padding: "20px 32px 32px", display: "flex", flexDirection: "column", gap: 10, animationDelay: "0.46s" }}>
+          <a
+            href={explorePath}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              padding: "13px 18px",
+              borderRadius: theme.cornerRadius,
+              background: primary,
+              color: readableTextOn(primary),
+              fontWeight: 700,
+              textDecoration: "none",
+            }}
+          >
+            Explore more sessions <ArrowRight size={16} />
+          </a>
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}

package/src/ui/styled/CoachingDetail.tsx

@@ -0,0 +1,99 @@
+import { Clock } from "lucide-react";
+import type { CoachingProduct } from "../../types/models";
+import { useGetCoachingProduct } from "../../data/queries/useCoachingProducts";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Loading } from "./Loading";
+import { CoachingBooking } from "./CoachingBooking";
+import { ReviewsSection } from "./ReviewsSection";
+
+export interface CoachingDetailProps {
+  /** Coaching product slug (resolves the product). */
+  slug?: string;
+  /** Server-fetched coaching product used to seed the query (SSR). */
+  initialCoaching?: CoachingProduct;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: React.CSSProperties;
+  /** Stripe return URL for a PAID booking (forwarded to the booking flow). */
+  finalisePath?: (slug: string, bookingId: string) => string;
+  /** Host-owned navigation on FREE completion (forwarded to the booking flow). */
+  onComplete?: (info: { slug: string; bookingId: string }) => void;
+}
+
+export function CoachingDetail({
+  slug,
+  initialCoaching,
+  formatAmount,
+  className,
+  style,
+  finalisePath,
+  onComplete,
+}: CoachingDetailProps) {
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  const pricesIncludeTax = usePricesIncludeTax();
+  const { data: product, isLoading } = useGetCoachingProduct(slug, { initialData: initialCoaching });
+
+  if (isLoading) return <Loading fullPage />;
+  if (!product) return <p>Coaching session not found.</p>;
+
+  const cover = product.media?.find((m) => m.type === "image")?.url ?? product.media?.[0]?.url;
+
+  return (
+    <div
+      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
+    >
+      {cover && (
+        <img
+          src={cover}
+          alt={product.title}
+          style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: t.cornerRadius }}
+        />
+      )}
+
+      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
+        <div className="flex-1 min-w-0">
+          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: t.headingFontFamily }}>{product.title}</h1>
+
+          <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
+            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <Clock size={16} /> {product.durationMinutes} minutes
+            </span>
+          </div>
+
+          {product.description && (
+            <>
+              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: t.headingFontFamily }}>About this session</h2>
+              <div dangerouslySetInnerHTML={{ __html: product.description }} style={{ lineHeight: 1.7, opacity: 0.9 }} />
+            </>
+          )}
+        </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"
+          style={{
+            padding: 16,
+            border: `1px solid ${t.primary}80`,
+            borderRadius: t.cornerRadius,
+            background: t.surface,
+          }}
+        >
+          <span style={{ fontWeight: 600 }}>
+            <PriceDisplay amount={Number(product.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+          </span>
+          <CoachingBooking slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
+        </aside>
+      </div>
+
+      {/* Verified-purchase reviews */}
+      <ReviewsSection entityType="coaching_product" entityId={product.id} initialAggregate={product.reviewAggregate} />
+    </div>
+  );
+}

package/src/ui/styled/CohortPage.tsx

@@ -0,0 +1,82 @@
+import { useCohortPage } from "../../data/queries/useCohortPage";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface CohortPageProps {
+  /** Cohort id (route param). */
+  cohortId: string;
+}
+
+/** Short date only, e.g. "Jun 30, 2026". */
+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`. */
+export function CohortPage({ cohortId }: CohortPageProps) {
+  const theme = useForgeTheme();
+  const { data, isLoading } = useCohortPage(cohortId);
+
+  if (isLoading) return <Loading fullPage />;
+
+  // The payload carries both structured `data` and a serialized Craft.js `layout`.
+  // This thin reference renders the structured data; the Craft layout JSON is not
+  // rendered here (no CMS renderer in the starter).
+  const cohort = data?.data?.cohort;
+  const course = data?.data?.course;
+  const modules = data?.data?.modules ?? [];
+
+  if (!cohort) return <p style={{ color: theme.colors.text }}>Cohort not found.</p>;
+
+  return (
+    <div style={{ maxWidth: 760, margin: "0 auto", color: theme.colors.text }}>
+      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 8 }}>{cohort.title}</h1>
+      {(cohort.startDate || cohort.endDate) && (
+        <p style={{ opacity: 0.7, marginBottom: 16 }}>
+          {cohort.startDate ? formatDate(cohort.startDate) : "TBD"}
+          {cohort.endDate ? ` – ${formatDate(cohort.endDate)}` : ""}
+        </p>
+      )}
+      {cohort.description && <p style={{ marginBottom: 24, lineHeight: 1.6 }}>{cohort.description}</p>}
+
+      {course && (
+        <section style={{ marginBottom: 24 }}>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 6 }}>{course.title}</h2>
+          {course.description && <p style={{ opacity: 0.8 }}>{course.description}</p>}
+        </section>
+      )}
+
+      {modules.length > 0 && (
+        <section>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Curriculum</h2>
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            {[...modules]
+              .sort((a, b) => a.order - b.order)
+              .map((m) => (
+                <div
+                  key={m.id}
+                  style={{
+                    border: `1px solid ${theme.colors.text}1a`,
+                    borderRadius: theme.cornerRadius,
+                    padding: 16,
+                  }}
+                >
+                  <h3 style={{ fontWeight: 600, marginBottom: 4 }}>{m.title}</h3>
+                  {m.description && <p style={{ fontSize: 14, opacity: 0.7 }}>{m.description}</p>}
+                  {m.lessons && m.lessons.length > 0 && (
+                    <ul style={{ marginTop: 8, paddingLeft: 18, opacity: 0.8 }}>
+                      {[...m.lessons]
+                        .sort((a, b) => a.order - b.order)
+                        .map((l) => (
+                          <li key={l.id}>{l.title}</li>
+                        ))}
+                    </ul>
+                  )}
+                </div>
+              ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/ConfirmSubscription.tsx

@@ -0,0 +1,134 @@
+import { AlertTriangle, ArrowRight, Loader2, Mail } from "lucide-react";
+import { useConfirmEmailSubscription } from "../../data/queries/useLeadMagnet";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, alpha } from "./Confirmation";
+
+export interface ConfirmSubscriptionProps {
+  /** Subscriber id from the confirmation link (URL search param). */
+  subscriberId?: string;
+  /** Where the "Back to site" action links. Default `/`. */
+  homePath?: string;
+}
+
+/**
+ * Email subscription confirmation screen — themed "ceremony" card (animated seal,
+ * atmospheric backdrop, staggered reveals) consistent with the other Forge
+ * confirmations. Built on `useConfirmEmailSubscription`.
+ */
+export function ConfirmSubscription({ subscriberId, homePath = "/" }: ConfirmSubscriptionProps) {
+  const theme = useForgeTheme();
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+  const { data, isLoading, isError } = useConfirmEmailSubscription(subscriberId);
+  const profile = data?.profile;
+
+  // ── Loading ──
+  if (subscriberId && isLoading) {
+    return (
+      <ConfirmationStage>
+        <div style={{ textAlign: "center", color: alpha(text, 0.75) }}>
+          <Loader2 size={40} color={primary} style={{ animation: "cs-spin 1s linear infinite" }} />
+          <style>{"@keyframes cs-spin{to{transform:rotate(360deg)}}"}</style>
+          <p style={{ marginTop: 16, fontSize: 15 }}>Confirming your subscription…</p>
+        </div>
+      </ConfirmationStage>
+    );
+  }
+
+  // ── Error (bad / expired link) ──
+  if (!subscriberId || isError) {
+    return (
+      <ConfirmationStage>
+        <ConfirmationCard width={420}>
+          <div style={{ padding: "40px 30px", textAlign: "center" }}>
+            <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
+            <h1 style={{ fontSize: 24, fontWeight: 800, margin: "22px 0 8px" }}>
+              {subscriberId ? "Link expired" : "Invalid link"}
+            </h1>
+            <p style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 0 24px" }}>
+              {subscriberId
+                ? "This confirmation link is no longer valid. Try subscribing again."
+                : "This confirmation link is missing or malformed."}
+            </p>
+            <Action href={homePath} primary={primary}>
+              Back to site <ArrowRight size={16} />
+            </Action>
+          </div>
+        </ConfirmationCard>
+      </ConfirmationStage>
+    );
+  }
+
+  // ── Success ──
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard width={440}>
+        <div style={{ padding: "40px 30px 34px", textAlign: "center" }}>
+          <CheckSeal />
+          {profile?.name && (
+            <p
+              className="cf-rise"
+              style={{
+                margin: "22px 0 4px",
+                fontSize: 12,
+                fontWeight: 700,
+                letterSpacing: "0.2em",
+                textTransform: "uppercase",
+                color: primary,
+                animationDelay: "0.15s",
+              }}
+            >
+              {profile.name}
+            </p>
+          )}
+          <h1 className="cf-rise" style={{ fontSize: 27, fontWeight: 800, margin: "6px 0 8px", animationDelay: "0.22s" }}>
+            You’re on the list 🎉
+          </h1>
+          <p
+            className="cf-rise"
+            style={{
+              fontSize: 15,
+              color: alpha(text, 0.7),
+              margin: "0 0 24px",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              animationDelay: "0.3s",
+            }}
+          >
+            <Mail size={15} color={alpha(text, 0.6)} />
+            You’ll now receive updates from {profile?.name || "us"}.
+          </p>
+          <div className="cf-rise" style={{ animationDelay: "0.4s" }}>
+            <Action href={homePath} primary={primary}>
+              Explore the site <ArrowRight size={16} />
+            </Action>
+          </div>
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}
+
+function Action({ href, primary, children }: { href: string; primary: string; children: React.ReactNode }) {
+  return (
+    <a
+      href={href}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: "12px 22px",
+        borderRadius: 10,
+        fontWeight: 700,
+        textDecoration: "none",
+        background: primary,
+        color: readableTextOn(primary),
+      }}
+    >
+      {children}
+    </a>
+  );
+}

package/src/ui/styled/Confirmation.tsx

@@ -0,0 +1,171 @@
+import type { ReactNode } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+// Shared building blocks for post-purchase "ticket" confirmation pages
+// (coaching / event / course / checkout / invoice / payment-link). All colors
+// come from the tenant theme so each creator's confirmation is on-brand; motion
+// is CSS-only (SSR-safe) and honors prefers-reduced-motion.
+
+/** Append an alpha to a 6-digit hex color. */
+export const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16).padStart(2, "0");
+
+/** Atmospheric backdrop (twin glows from the theme primary) + keyframes. Centers its child. */
+export function ConfirmationStage({ children }: { children: ReactNode }) {
+  const { colors } = useForgeTheme();
+  return (
+    <div
+      style={{
+        minHeight: "calc(100vh - 220px)",
+        display: "grid",
+        placeItems: "center",
+        padding: "32px 8px",
+        background: `radial-gradient(60% 50% at 15% 0%, ${alpha(colors.primary, 0.1)}, transparent 70%), radial-gradient(50% 50% at 100% 100%, ${alpha(colors.primary, 0.08)}, transparent 70%), ${colors.background}`,
+      }}
+    >
+      <style>{KEYFRAMES}</style>
+      {children}
+    </div>
+  );
+}
+
+/** The ticket card shell: accent bar + soft shadow + themed border. */
+export function ConfirmationCard({ children, width = 480 }: { children: ReactNode; width?: number }) {
+  const t = useForgeTheme();
+  const p = t.colors.primary;
+  return (
+    <div
+      className="cf-card"
+      style={{
+        position: "relative",
+        width: `min(${width}px, 100%)`,
+        background: t.colors.background,
+        color: t.colors.text,
+        borderRadius: t.cornerRadius * 2,
+        border: `1px solid ${alpha(p, 0.14)}`,
+        boxShadow: `0 30px 80px -40px ${alpha(p, 0.55)}`,
+        overflow: "hidden",
+        fontFamily: t.fontFamily,
+      }}
+    >
+      <div style={{ height: 5, background: `linear-gradient(90deg, ${p}, ${alpha(p, 0.35)})` }} />
+      {children}
+    </div>
+  );
+}
+
+/** Animated success seal — ring + checkmark draw on, with a pulsing halo. */
+export function CheckSeal() {
+  const c = useForgeTheme().colors.primary;
+  return (
+    <div style={{ position: "relative", width: 84, height: 84, margin: "0 auto" }}>
+      <span className="cf-halo" style={{ position: "absolute", inset: 0, borderRadius: "50%", background: alpha(c, 0.16) }} />
+      <svg viewBox="0 0 52 52" width="84" height="84" style={{ position: "relative" }}>
+        <circle className="cf-ring" cx="26" cy="26" r="24" fill={alpha(c, 0.06)} stroke={c} strokeWidth="2" />
+        <path className="cf-tick" d="M15 27 l7.5 7.5 L38 18" fill="none" stroke={c} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </div>
+  );
+}
+
+/** Amber warning seal for incomplete/failed states. */
+export function WarnSeal({ icon }: { icon: ReactNode }) {
+  return (
+    <div
+      className="cf-pop"
+      style={{
+        width: 76,
+        height: 76,
+        margin: "0 auto",
+        borderRadius: "50%",
+        display: "grid",
+        placeItems: "center",
+        background: alpha("#f59e0b", 0.12),
+        border: `1px solid ${alpha("#f59e0b", 0.4)}`,
+      }}
+    >
+      {icon}
+    </div>
+  );
+}
+
+/** Perforated ticket divider with cut-out notches on both edges. */
+export function Perforation() {
+  const t = useForgeTheme();
+  const p = t.colors.primary;
+  const notch = (side: "left" | "right"): React.CSSProperties => ({
+    position: "absolute",
+    top: "50%",
+    [side]: -13,
+    transform: "translateY(-50%)",
+    width: 26,
+    height: 26,
+    borderRadius: "50%",
+    background: t.colors.background,
+    border: `1px solid ${alpha(p, 0.14)}`,
+    clipPath: side === "left" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)",
+  });
+  return (
+    <div style={{ position: "relative", height: 1 }}>
+      <div style={{ position: "absolute", inset: "0 26px", borderTop: `2px dashed ${alpha(p, 0.28)}` }} />
+      <span style={notch("left")} />
+      <span style={notch("right")} />
+    </div>
+  );
+}
+
+/** A `<dt>/<dd>` label→value pair for the details grid. */
+export function ConfirmationRow({
+  label,
+  value,
+  accent,
+  mono,
+  strong,
+}: {
+  label: string;
+  value: string;
+  accent?: boolean;
+  mono?: boolean;
+  strong?: boolean;
+}) {
+  const t = useForgeTheme();
+  return (
+    <>
+      <dt style={{ fontSize: 13, color: alpha(t.colors.text, 0.5), alignSelf: "center" }}>{label}</dt>
+      <dd
+        style={{
+          margin: 0,
+          textAlign: "right",
+          fontSize: strong ? 16 : 14,
+          fontWeight: strong ? 800 : 600,
+          color: accent ? t.colors.primary : t.colors.text,
+          fontFamily: mono ? "ui-monospace, SFMono-Regular, Menlo, monospace" : undefined,
+          letterSpacing: mono ? "0.04em" : undefined,
+          wordBreak: "break-word",
+        }}
+      >
+        {value}
+      </dd>
+    </>
+  );
+}
+
+const KEYFRAMES = `
+@keyframes cf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
+@keyframes cf-pop { 0% { transform: scale(.5); opacity: 0; } 55% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
+@keyframes cf-ring { to { stroke-dashoffset: 0; } }
+@keyframes cf-tick { to { stroke-dashoffset: 0; } }
+@keyframes cf-halo { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.28); opacity: 0; } }
+@keyframes cf-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
+.cf-rise { opacity: 0; animation: cf-rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
+.cf-pop { animation: cf-pop .5s cubic-bezier(.2,.8,.2,1) forwards; }
+.cf-pulse { animation: cf-pulse 1.4s ease-in-out infinite; }
+.cf-card { animation: cf-rise .5s ease-out both; }
+.cf-halo { animation: cf-halo 2.4s ease-out .3s infinite; }
+.cf-ring { stroke-dasharray: 151; stroke-dashoffset: 151; animation: cf-ring .6s ease-out .1s forwards; }
+.cf-tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: cf-tick .4s cubic-bezier(.6,0,.3,1) .55s forwards; }
+@media (prefers-reduced-motion: reduce) {
+  .cf-rise, .cf-pop, .cf-card { animation: none; opacity: 1; transform: none; }
+  .cf-halo { animation: none; opacity: 0; }
+  .cf-ring, .cf-tick { animation: none; stroke-dashoffset: 0; }
+}
+`;