@tribe-nest/forge 1.13.0

package/src/ui/styled/BlogList.tsx

@@ -0,0 +1,101 @@
+import { useFeaturedBlogPost, useBlogPosts } from "../../data/queries/useBlog";
+import type { BlogPost } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface BlogListProps {
+  /** Build the href for a blog post detail page from its slug. */
+  blogPostHref?: (slug: string) => 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" });
+}
+
+function excerpt(html: string, len: number) {
+  return html.replace(/<[^>]+>/g, "").slice(0, len);
+}
+
+/** Blog index — featured post + grid of remaining posts. Built on `useFeaturedBlogPost` + `useBlogPosts`. */
+export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogListProps = {}) {
+  const theme = useForgeTheme();
+  const { data: featured, isLoading: loadingFeatured } = useFeaturedBlogPost();
+  const { data, isLoading: loadingPosts } = useBlogPosts({ page: 1, limit: 12 });
+
+  if (loadingFeatured || loadingPosts) return <Loading fullPage />;
+
+  const posts = data?.data ?? [];
+  const regular = featured ? posts.filter((p) => p.id !== featured.id) : posts;
+
+  const card: React.CSSProperties = {
+    color: theme.colors.text,
+    textDecoration: "none",
+    border: `1px solid ${theme.colors.text}1a`,
+    borderRadius: theme.cornerRadius,
+    overflow: "hidden",
+    display: "block",
+  };
+
+  return (
+    <div style={{ maxWidth: 900, margin: "0 auto", color: theme.colors.text }}>
+      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24 }}>Blog</h1>
+
+      {featured && (
+        <a href={blogPostHref(featured.slug)} style={{ ...card, marginBottom: 32 }}>
+          {featured.media?.[0]?.url && (
+            <img
+              src={featured.media[0].url}
+              alt={featured.title}
+              style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover" }}
+            />
+          )}
+          <div style={{ padding: 24 }}>
+            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
+              <span
+                style={{
+                  fontSize: 12,
+                  padding: "2px 8px",
+                  borderRadius: 4,
+                  background: theme.colors.primary,
+                  color: theme.colors.background,
+                }}
+              >
+                Featured
+              </span>
+              {featured.publishedAt && (
+                <span style={{ fontSize: 13, opacity: 0.6 }}>{formatDate(featured.publishedAt)}</span>
+              )}
+            </div>
+            <h2 style={{ fontSize: 26, fontWeight: 700, marginBottom: 8 }}>{featured.title}</h2>
+            <p style={{ opacity: 0.7 }}>{excerpt(featured.content, 200)}…</p>
+          </div>
+        </a>
+      )}
+
+      {regular.length ? (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 20 }}>
+          {regular.map((post: BlogPost) => {
+            const cover = post.media?.[0]?.url;
+            return (
+              <a key={post.id} href={blogPostHref(post.slug)} style={card}>
+                {cover && (
+                  <img src={cover} alt={post.title} style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover" }} />
+                )}
+                <div style={{ padding: 16 }}>
+                  {post.publishedAt && (
+                    <span style={{ fontSize: 12, opacity: 0.6 }}>{formatDate(post.publishedAt)}</span>
+                  )}
+                  <h3 style={{ fontSize: 18, fontWeight: 700, margin: "6px 0" }}>{post.title}</h3>
+                  <p style={{ fontSize: 14, opacity: 0.7 }}>{excerpt(post.content, 120)}…</p>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      ) : (
+        !featured && <p style={{ opacity: 0.7 }}>No blog posts available yet.</p>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/BlogPost.tsx

@@ -0,0 +1,160 @@
+import { Play, Pause } from "lucide-react";
+import { useBlogPost } from "../../data/queries/useBlog";
+import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
+import type { BlogPost as BlogPostModel } from "../../types/models";
+import { useForgeTheme, useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+// Baseline `.rich-text` content styles ship with Forge (WYSIWYG with the admin
+// editor) — no host-loaded stylesheet needed.
+import "./rich-text.css";
+
+export interface BlogPostProps {
+  /** Post slug — the public API resolves the post by slug. */
+  slug: string;
+  /** Href for the "Back to Blog" link. */
+  blogHref?: string;
+  /** Server-fetched post to seed the query for SSR (no client loading flash). */
+  initialPost?: BlogPostModel | null;
+}
+
+/** 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" });
+}
+
+/** "m:ss" / "h:mm:ss" from seconds; empty string when unknown. */
+function formatDuration(seconds: number | null | undefined): string {
+  if (!seconds || seconds <= 0) return "";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+}
+
+/**
+ * Play/pause bar for a post's audio attachment (audio posts / podcast-style
+ * episodes). Plays through the shared Forge audio player, so playback persists
+ * in the global `<AudioPlayer />` bar while browsing.
+ */
+function AudioAttachmentBar({
+  post,
+  audio,
+  coverImage,
+}: {
+  post: BlogPostModel;
+  audio: BlogPostModel["media"][number];
+  coverImage?: string;
+}) {
+  const t = useThemeTokens();
+  const player = useAudioPlayer();
+
+  const isCurrent = player.currentTrack?.id === post.id;
+  const isPlaying = isCurrent && player.isPlaying;
+  const duration = formatDuration(audio.durationSec);
+
+  const onClick = () => {
+    if (!audio.url) return;
+    if (isCurrent) {
+      if (isPlaying) player.pause();
+      else player.play();
+    } else {
+      player.loadAndPlay({ id: post.id, title: post.title, url: audio.url, coverImage });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 16,
+        padding: 16,
+        marginBottom: 24,
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+      }}
+    >
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={isPlaying ? "Pause" : "Play"}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "10px 20px",
+          borderRadius: 999,
+          border: "none",
+          cursor: "pointer",
+          fontWeight: 600,
+          background: t.primary,
+          color: t.textPrimary,
+        }}
+      >
+        {isPlaying ? <Pause size={18} /> : <Play size={18} />}
+        {isPlaying ? "Pause" : "Play"}
+      </button>
+      {duration && <span style={{ fontSize: 14, opacity: 0.6, fontVariantNumeric: "tabular-nums" }}>{duration}</span>}
+    </div>
+  );
+}
+
+/** Blog post detail, resolved by slug. Built on `useBlogPost`. */
+export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostProps) {
+  const theme = useForgeTheme();
+  // Detail is resolved by slug (the public API looks posts up by slug).
+  const { data: post, isLoading } = useBlogPost(slug, { initialData: initialPost });
+
+  if (isLoading) return <Loading fullPage />;
+  if (!post) return <p>Post not found.</p>;
+
+  // Cover is the first image media — audio posts put the audio file first in
+  // `media`, which must not be rendered as an <img>. `type` may be a bare kind
+  // ("image") or a mime ("image/jpeg"), so match by prefix.
+  const cover = post.media?.find((m) => (m.type || "").startsWith("image"))?.url;
+  // An audio attachment (audio posts / podcast-style episodes) gets a play bar.
+  const audio = post.media?.find((m) => (m.type || "").startsWith("audio"));
+
+  return (
+    <article style={{ maxWidth: 720, margin: "0 auto", color: theme.colors.text }}>
+      <a href={blogHref} style={{ color: theme.colors.primary, fontSize: 14 }}>
+        ← Back to Blog
+      </a>
+
+      {cover && (
+        <img
+          src={cover}
+          alt={post.title}
+          style={{ width: "100%", borderRadius: theme.cornerRadius, margin: "24px 0", objectFit: "cover" }}
+        />
+      )}
+
+      <div style={{ display: "flex", gap: 12, alignItems: "center", margin: "16px 0" }}>
+        {post.publishedAt && <span style={{ fontSize: 14, opacity: 0.6 }}>{formatDate(post.publishedAt)}</span>}
+        {post.isFeatured && (
+          <span
+            style={{
+              fontSize: 12,
+              padding: "2px 8px",
+              borderRadius: 4,
+              background: theme.colors.primary,
+              color: theme.colors.background,
+            }}
+          >
+            Featured
+          </span>
+        )}
+      </div>
+
+      <h1 style={{ fontSize: 34, fontWeight: 800, marginBottom: 24 }}>{post.title}</h1>
+
+      {audio && <AudioAttachmentBar post={post} audio={audio} coverImage={cover} />}
+
+      {/* `rich-text` = shared baseline content styles (WYSIWYG with the editor),
+          bundled with Forge via the ./rich-text.css import above. */}
+      <div className="rich-text" dangerouslySetInnerHTML={{ __html: post.content || "" }} />
+    </article>
+  );
+}

package/src/ui/styled/BlogPostFooter.tsx

@@ -0,0 +1,33 @@
+import { type CSSProperties } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { PageActions } from "./PageActions";
+import { BlogComments } from "./BlogComments";
+
+export interface BlogPostFooterProps {
+  blogPostId: string;
+  /** Where "Sign in to comment" links when the profile requires sign-in. */
+  signInHref?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The single drop-in for everything rendered after a blog post's body — the
+ * artist's configured page actions (CTAs) followed by the comments section.
+ * Owns its own spacing/divider so BOTH the customer app and site-starter (and
+ * AI-built sites) mount exactly this one component with no per-app wrappers,
+ * guaranteeing identical layout.
+ */
+export function BlogPostFooter({ blogPostId, signInHref, className, style }: BlogPostFooterProps) {
+  const theme = useForgeTheme();
+  const border = theme.colors.border ?? `${theme.colors.primary}33`;
+
+  return (
+    <div className={className} style={{ marginTop: 48, textAlign: "left", ...style }}>
+      <PageActions pageType="blog_post" entityId={blogPostId} />
+      <div style={{ marginTop: 48, paddingTop: 32, borderTop: `1px solid ${border}` }}>
+        <BlogComments blogPostId={blogPostId} signInHref={signInHref} />
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/BotProtection.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import { useForge } from "../../provider/ForgeProvider";
+import { useSiteConfig } from "../../data/queries/useWebsite";
+
+export interface BotFields {
+  /** Altcha proof-of-work payload (base64), empty until solved / when disabled. */
+  botToken: string;
+  /** Honeypot value — always "" for a human; any value marks a bot. */
+  botField: string;
+}
+
+export const EMPTY_BOT_FIELDS: BotFields = { botToken: "", botField: "" };
+
+type Challenge = {
+  algorithm: string;
+  challenge: string;
+  salt: string;
+  signature: string;
+  maxnumber: number;
+};
+
+// Brute-force the proof-of-work: find n where SHA-256(salt + n) === challenge.
+async function solvePow(salt: string, target: string, maxnumber: number): Promise<number | null> {
+  const enc = new TextEncoder();
+  for (let n = 0; n <= maxnumber; n++) {
+    const digest = await crypto.subtle.digest("SHA-256", enc.encode(salt + n));
+    const hex = Array.from(new Uint8Array(digest))
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+    if (hex === target) return n;
+  }
+  return null;
+}
+
+/**
+ * Drop-in bot protection for public forms — a hidden honeypot plus (when the
+ * platform has Altcha enabled) an invisible proof-of-work challenge solved in
+ * the browser. Reports the fields up via `onChange`; spread them into the form's
+ * submit body ({ botToken, botField }). SSR-safe (the PoW runs client-only). One
+ * self-hosted verifier works across every tenant subdomain + custom domain — no
+ * per-domain config, no external service.
+ */
+export function BotProtection({ onChange }: { onChange: (fields: BotFields) => void }) {
+  const { apiUrl } = useForge();
+  const { data: siteConfig } = useSiteConfig();
+  const altchaEnabled = siteConfig?.altchaEnabled ?? false;
+
+  const [token, setToken] = useState("");
+  const [honeypot, setHoneypot] = useState("");
+
+  useEffect(() => {
+    onChange({ botToken: token, botField: honeypot });
+  }, [token, honeypot, onChange]);
+
+  useEffect(() => {
+    if (!altchaEnabled || typeof window === "undefined" || !apiUrl) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(`${apiUrl.replace(/\/$/, "")}/public/altcha/challenge`);
+        if (!res.ok) return;
+        const ch = (await res.json()) as Partial<Challenge>;
+        if (!ch.challenge || !ch.salt || !ch.signature || ch.maxnumber == null) return; // disabled
+        const number = await solvePow(ch.salt, ch.challenge, ch.maxnumber);
+        if (cancelled || number == null) return;
+        const payload = btoa(
+          JSON.stringify({
+            algorithm: ch.algorithm,
+            challenge: ch.challenge,
+            number,
+            salt: ch.salt,
+            signature: ch.signature,
+          }),
+        );
+        setToken(payload);
+      } catch {
+        // Solve failures leave botToken empty; the server decides whether to
+        // enforce. Never block form render on bot protection.
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [altchaEnabled, apiUrl]);
+
+  return (
+    <>
+      {/* Honeypot — off-screen, not announced, skipped by keyboard/autofill. */}
+      <input
+        type="text"
+        name="botField"
+        tabIndex={-1}
+        autoComplete="off"
+        aria-hidden="true"
+        value={honeypot}
+        onChange={(e) => setHoneypot(e.target.value)}
+        style={{ position: "absolute", left: "-9999px", top: "auto", width: 1, height: 1, opacity: 0 }}
+      />
+    </>
+  );
+}

package/src/ui/styled/Button.tsx

@@ -0,0 +1,88 @@
+import { type ButtonHTMLAttributes, type CSSProperties, forwardRef } from "react";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+
+const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16).padStart(2, "0");
+
+const SIZES: Record<ButtonSize, { padding: string; fontSize: number }> = {
+  sm: { padding: "8px 14px", fontSize: 14 },
+  md: { padding: "12px 18px", fontSize: 15 },
+  lg: { padding: "14px 22px", fontSize: 16 },
+};
+
+/**
+ * The style object for a themed button — exported so existing styled blocks can
+ * adopt it without swapping their markup. Primary buttons use a contrast-aware
+ * text color (never a hardcoded #fff on the tenant primary).
+ */
+export function buttonStyle(
+  t: ForgeTheme,
+  opts: { variant?: ButtonVariant; size?: ButtonSize; fullWidth?: boolean; disabled?: boolean } = {},
+): CSSProperties {
+  const { variant = "primary", size = "md", fullWidth, disabled } = opts;
+  const s = SIZES[size];
+  const base: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    width: fullWidth ? "100%" : undefined,
+    padding: s.padding,
+    fontSize: s.fontSize,
+    fontWeight: 600,
+    lineHeight: 1.2,
+    borderRadius: t.cornerRadius,
+    fontFamily: t.fontFamily,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+    transition: "opacity .15s ease, background .15s ease",
+    textDecoration: "none",
+    boxSizing: "border-box",
+  };
+  switch (variant) {
+    case "secondary":
+      return { ...base, background: alpha(t.colors.primary, 0.12), color: t.colors.text, border: "none" };
+    case "outline":
+      return { ...base, background: "transparent", color: t.colors.text, border: `1px solid ${alpha(t.colors.primary, 0.5)}` };
+    case "ghost":
+      return { ...base, background: "transparent", color: t.colors.primary, border: "none" };
+    case "primary":
+    default:
+      // Creator's chosen "text on primary" wins; auto-contrast is the fallback.
+      return {
+        ...base,
+        background: t.colors.primary,
+        color: t.colors.textPrimary || readableTextOn(t.colors.primary),
+        border: "none",
+      };
+  }
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+/** Unified themed button — drop-in from `@tribe-nest/forge/ui`. Contrast-safe. */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant, size, fullWidth, loading, disabled, style, children, ...rest },
+  ref,
+) {
+  const theme = useForgeTheme();
+  const isDisabled = disabled || loading;
+  return (
+    <button
+      ref={ref}
+      disabled={isDisabled}
+      style={{ ...buttonStyle(theme, { variant, size, fullWidth, disabled: isDisabled }), ...style }}
+      {...rest}
+    >
+      {loading ? "…" : children}
+    </button>
+  );
+});