@pylonsync/create-pylon 0.11.0 → 0.11.3

package/templates/consumer/components/social/post-card.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { plural, timeAgo, type Post } from "@/lib/social";
+import { cn } from "@/lib/utils";
+import { Avatar } from "./avatar";
+import { CommentForm } from "./comment-form";
+import { LikesLine, PostActions, PostMenu, PostPhoto } from "./post-parts";
+import { RichText } from "./rich-text";
+import type { Social } from "./use-social";
+
+/** One post in the home feed. */
+export function PostCard({ social, post }: { social: Social; post: Post }) {
+  const author = social.profileByUser.get(post.authorId);
+  const comments = social.commentsByPost.get(post.id) ?? [];
+  const shown = comments.slice(-2);
+  const username = author?.username ?? "unknown";
+
+  return (
+    <article className="border-b pb-4 sm:pb-5">
+      <header className="flex items-center gap-2.5 px-3 py-3 sm:px-0">
+        <Link href={`/u/${username}`}>
+          <Avatar profile={author} size={32} />
+        </Link>
+        <div className="flex min-w-0 items-baseline gap-1.5 text-sm">
+          <Link href={`/u/${username}`} className="truncate font-semibold hover:text-zinc-500">
+            {username}
+          </Link>
+          <span className="text-zinc-500">·</span>
+          <Link href={`/p/${post.id}`} className="shrink-0 text-zinc-500 hover:underline">
+            <time dateTime={post.createdAt}>{timeAgo(post.createdAt)}</time>
+          </Link>
+        </div>
+        <div className="ml-auto">
+          <PostMenu social={social} post={post} />
+        </div>
+      </header>
+
+      <PostPhoto
+        social={social}
+        post={post}
+        className={cn("w-full sm:rounded-[4px] sm:border", post.shape === "portrait" ? "aspect-[4/5]" : "aspect-square")}
+      />
+
+      <div className="px-3 pt-1 sm:px-0">
+        <PostActions social={social} post={post} />
+        <LikesLine social={social} post={post} />
+        {post.caption ? (
+          <p className="mt-1.5 text-sm leading-snug">
+            <Link href={`/u/${username}`} className="mr-1.5 font-semibold">
+              {username}
+            </Link>
+            <RichText text={post.caption} />
+          </p>
+        ) : null}
+        {comments.length > shown.length ? (
+          <Link href={`/p/${post.id}`} className="mt-1.5 block text-sm text-zinc-500">
+            View all {plural(comments.length, "comment")}
+          </Link>
+        ) : null}
+        {shown.map((c) => {
+          const who = social.profileByUser.get(c.authorId)?.username ?? "unknown";
+          return (
+            <p key={c.id} className="mt-1 text-sm leading-snug">
+              <Link href={`/u/${who}`} className="mr-1.5 font-semibold">
+                {who}
+              </Link>
+              <RichText text={c.text} />
+            </p>
+          );
+        })}
+        <CommentForm postId={post.id} className="mt-1" />
+      </div>
+    </article>
+  );
+}

package/templates/consumer/components/social/post-grid.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { Heart, MessageCircle } from "lucide-react";
+import { formatCount, type Post } from "@/lib/social";
+import type { Social } from "./use-social";
+
+/** Square tiles, three across. Hover shows the like and comment counts. */
+export function PostGrid({ social, posts }: { social: Social; posts: Post[] }) {
+  return (
+    <ul className="grid grid-cols-3 gap-1">
+      {posts.map((post) => {
+        const likes = social.likeCount.get(post.id) ?? 0;
+        const comments = social.commentsByPost.get(post.id)?.length ?? 0;
+        return (
+          <li key={post.id}>
+            <Link href={`/p/${post.id}`} className="group relative block aspect-square overflow-hidden bg-zinc-100">
+              <img src={post.imageUrl} alt={post.caption ?? ""} loading="lazy" className="size-full object-cover" />
+              <span className="absolute inset-0 hidden items-center justify-center gap-6 bg-black/35 text-base font-bold text-white group-hover:flex">
+                <span className="flex items-center gap-1.5">
+                  <Heart className="size-5 fill-white" />
+                  {formatCount(likes)}
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <MessageCircle className="size-5 -scale-x-100 fill-white" />
+                  {formatCount(comments)}
+                </span>
+              </span>
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function GridSkeleton({ count = 9 }: { count?: number }) {
+  return (
+    <ul className="grid grid-cols-3 gap-1" aria-hidden>
+      {Array.from({ length: count }, (_, i) => (
+        <li key={i} className="aspect-square bg-zinc-100" />
+      ))}
+    </ul>
+  );
+}

package/templates/consumer/components/social/post-parts.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState } from "react";
+import { db, Link, useRouter } from "@pylonsync/react";
+import { Bookmark, Heart, MessageCircle, MoreHorizontal, Send } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { plural, type Post } from "@/lib/social";
+import { cn } from "@/lib/utils";
+import { actions, type Social } from "./use-social";
+
+/** Heart, comment, share, and save, in one row. */
+export function PostActions({ social, post, onComment }: { social: Social; post: Post; onComment?: () => void }) {
+  const liked = social.myLikes.has(post.id);
+  const saved = social.mySaves.has(post.id);
+  const [copied, setCopied] = useState(false);
+
+  async function share() {
+    const url = `${window.location.origin}/p/${post.id}`;
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      window.prompt("Copy this link", url);
+    }
+  }
+
+  return (
+    <div className="-mx-2 flex items-center">
+      <IconButton label={liked ? "Unlike" : "Like"} onClick={() => actions.toggleLike(social, post.id)}>
+        <Heart className={cn("size-6 transition-transform active:scale-90", liked ? "fill-like text-like" : "")} strokeWidth={liked ? 2 : 1.75} />
+      </IconButton>
+      {onComment ? (
+        <IconButton label="Comment" onClick={onComment}>
+          <MessageCircle className="size-6 -scale-x-100" strokeWidth={1.75} />
+        </IconButton>
+      ) : (
+        <Link href={`/p/${post.id}`} aria-label="Comment" className="p-2 hover:opacity-60">
+          <MessageCircle className="size-6 -scale-x-100" strokeWidth={1.75} />
+        </Link>
+      )}
+      <IconButton label="Copy link" onClick={share}>
+        <Send className="size-6" strokeWidth={1.75} />
+      </IconButton>
+      {copied ? <span className="text-xs text-zinc-500">Link copied</span> : null}
+      <IconButton label={saved ? "Remove from saved" : "Save"} onClick={() => actions.toggleSave(social, post.id)} className="ml-auto">
+        <Bookmark className={cn("size-6", saved ? "fill-current" : "")} strokeWidth={1.75} />
+      </IconButton>
+    </div>
+  );
+}
+
+export function LikesLine({ social, post }: { social: Social; post: Post }) {
+  const count = social.likeCount.get(post.id) ?? 0;
+  if (count === 0) {
+    return <p className="text-sm text-zinc-500">Be the first to like this</p>;
+  }
+  return <p className="text-sm font-semibold">{plural(count, "like")}</p>;
+}
+
+function IconButton({ label, onClick, className, children }: { label: string; onClick: () => void; className?: string; children: React.ReactNode }) {
+  return (
+    <button type="button" aria-label={label} title={label} onClick={onClick} className={cn("p-2 hover:opacity-60", className)}>
+      {children}
+    </button>
+  );
+}
+
+/** The "…" menu: open the post, copy its link, and delete it when it is yours. */
+export function PostMenu({ social, post }: { social: Social; post: Post }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const mine = post.authorId === social.me;
+  const row = "w-full border-t py-3.5 text-center text-sm first:border-t-0 hover:bg-zinc-50";
+  return (
+    <>
+      <button type="button" aria-label="More options" onClick={() => setOpen(true)} className="p-1 hover:opacity-60">
+        <MoreHorizontal className="size-5" />
+      </button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-sm gap-0 overflow-hidden p-0 [&>button:last-child]:hidden">
+          <DialogTitle className="sr-only">Post options</DialogTitle>
+          {mine ? (
+            <button
+              type="button"
+              className={cn(row, "font-semibold text-red-600")}
+              onClick={() => {
+                setOpen(false);
+                void db.delete("Post", post.id);
+                if (window.location.pathname.startsWith("/p/")) router.push("/");
+              }}
+            >
+              Delete
+            </button>
+          ) : null}
+          <button type="button" className={row} onClick={() => { setOpen(false); router.push(`/p/${post.id}`); }}>
+            Go to post
+          </button>
+          <button
+            type="button"
+            className={row}
+            onClick={() => {
+              setOpen(false);
+              void navigator.clipboard?.writeText(`${window.location.origin}/p/${post.id}`);
+            }}
+          >
+            Copy link
+          </button>
+          <button type="button" className={row} onClick={() => setOpen(false)}>
+            Cancel
+          </button>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+/**
+ * The photo. A double tap likes the post and pops a heart over it, the way
+ * people expect a photo app to work.
+ */
+export function PostPhoto({ social, post, className, fit = "cover" }: { social: Social; post: Post; className?: string; fit?: "cover" | "contain" }) {
+  const [pops, setPops] = useState(0);
+  return (
+    <div
+      className={cn("relative select-none overflow-hidden bg-zinc-100", className)}
+      onDoubleClick={() => {
+        actions.like(social, post.id);
+        setPops((n) => n + 1);
+      }}
+    >
+      <img
+        src={post.imageUrl}
+        alt={post.caption ?? ""}
+        loading="lazy"
+        draggable={false}
+        className={cn("size-full", fit === "cover" ? "object-cover" : "object-contain")}
+      />
+      {pops > 0 ? (
+        <span key={pops} className="pointer-events-none absolute inset-0 grid place-items-center">
+          <Heart className="heart-pop size-24 fill-white text-white drop-shadow-lg" strokeWidth={1} />
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/templates/consumer/components/social/post-screen.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import React, { useRef } from "react";
+import { db, Link } from "@pylonsync/react";
+import { X } from "lucide-react";
+import { timeAgo, type Comment } from "@/lib/social";
+import { cn } from "@/lib/utils";
+import { Avatar } from "./avatar";
+import { CommentForm } from "./comment-form";
+import { LikesLine, PostActions, PostMenu, PostPhoto } from "./post-parts";
+import { PostGrid } from "./post-grid";
+import { RichText } from "./rich-text";
+import { SocialGate } from "./session";
+import { actions, useSocial, type Social } from "./use-social";
+
+export function PostScreen({ postId }: { postId: string }) {
+  return (
+    <div className="mx-auto max-w-[935px] py-0 sm:px-5 sm:py-8">
+      <SocialGate fallback={<div className="aspect-[4/3] w-full bg-zinc-100 sm:rounded-md" />}>
+        <LivePost postId={postId} />
+      </SocialGate>
+    </div>
+  );
+}
+
+function LivePost({ postId }: { postId: string }) {
+  const social = useSocial();
+  const commentInput = useRef<HTMLDivElement | null>(null);
+  const post = social.posts.find((p) => p.id === postId);
+  if (!post) {
+    return social.loading ? (
+      <div className="aspect-[4/3] w-full bg-zinc-100 sm:rounded-md" />
+    ) : (
+      <div className="py-24 text-center">
+        <p className="text-lg font-semibold">This post is not available.</p>
+        <p className="mt-2 text-sm text-zinc-500">It may have been deleted.</p>
+        <Link href="/" className="mt-4 inline-block text-sm font-semibold text-brand">
+          Back to the feed
+        </Link>
+      </div>
+    );
+  }
+
+  const author = social.profileByUser.get(post.authorId);
+  const username = author?.username ?? "unknown";
+  const comments = social.commentsByPost.get(post.id) ?? [];
+  const more = (social.postsByAuthor.get(post.authorId) ?? []).filter((p) => p.id !== post.id).slice(0, 6);
+  const mine = post.authorId === social.me;
+  const followingAuthor = social.following.has(post.authorId);
+
+  return (
+    <>
+      <article className="flex flex-col overflow-hidden border-y bg-background sm:rounded-md sm:border md:h-[min(86vh,760px)] md:flex-row">
+        <PostPhoto
+          social={social}
+          post={post}
+          fit="contain"
+          className={cn("bg-black md:h-full md:flex-1", post.shape === "portrait" ? "aspect-[4/5] md:aspect-auto" : "aspect-square md:aspect-auto")}
+        />
+        <div className="flex min-h-0 flex-col md:w-[400px] md:shrink-0 md:border-l">
+          <header className="flex items-center gap-3 border-b px-4 py-3">
+            <Link href={`/u/${username}`}>
+              <Avatar profile={author} size={32} />
+            </Link>
+            <Link href={`/u/${username}`} className="text-sm font-semibold hover:text-zinc-500">
+              {username}
+            </Link>
+            {!mine && social.me ? (
+              <>
+                <span className="text-zinc-400">·</span>
+                <button
+                  type="button"
+                  onClick={() => actions.toggleFollow(social, post.authorId)}
+                  className={cn("text-sm font-semibold", followingAuthor ? "text-zinc-900" : "text-brand hover:text-zinc-900")}
+                >
+                  {followingAuthor ? "Following" : "Follow"}
+                </button>
+              </>
+            ) : null}
+            <div className="ml-auto">
+              <PostMenu social={social} post={post} />
+            </div>
+          </header>
+
+          <ul className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4">
+            {post.caption ? (
+              <CommentRow social={social} authorId={post.authorId} text={post.caption} createdAt={post.createdAt} />
+            ) : null}
+            {comments.map((c) => (
+              <CommentRow key={c.id} social={social} authorId={c.authorId} text={c.text} createdAt={c.createdAt} comment={c} />
+            ))}
+            {!post.caption && comments.length === 0 ? (
+              <li className="m-auto py-8 text-center">
+                <p className="text-lg font-semibold">No comments yet.</p>
+                <p className="mt-1 text-sm text-zinc-500">Start the conversation.</p>
+              </li>
+            ) : null}
+          </ul>
+
+          <div className="border-t px-4 pt-1">
+            <PostActions social={social} post={post} onComment={() => commentInput.current?.querySelector("input")?.focus()} />
+            <LikesLine social={social} post={post} />
+            <time dateTime={post.createdAt} className="mt-1 block pb-3 text-xs text-zinc-500">
+              {new Date(post.createdAt).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
+            </time>
+          </div>
+          <div ref={commentInput} className="border-t px-4">
+            <CommentForm postId={post.id} />
+          </div>
+        </div>
+      </article>
+
+      {more.length ? (
+        <section className="mt-12 border-t pt-8">
+          <p className="mb-4 px-3 text-sm font-semibold text-zinc-500 sm:px-0">
+            More posts from{" "}
+            <Link href={`/u/${username}`} className="text-zinc-900 hover:underline">
+              {username}
+            </Link>
+          </p>
+          <PostGrid social={social} posts={more} />
+        </section>
+      ) : null}
+    </>
+  );
+}
+
+function CommentRow({
+  social,
+  authorId,
+  text,
+  createdAt,
+  comment,
+}: {
+  social: Social;
+  authorId: string;
+  text: string;
+  createdAt: string;
+  comment?: Comment;
+}) {
+  const who = social.profileByUser.get(authorId);
+  const username = who?.username ?? "unknown";
+  const mine = comment && comment.authorId === social.me;
+  return (
+    <li className="group flex gap-3">
+      <Link href={`/u/${username}`} className="shrink-0">
+        <Avatar profile={who} size={32} />
+      </Link>
+      <div className="min-w-0 flex-1 text-sm leading-snug">
+        <p className="break-words">
+          <Link href={`/u/${username}`} className="mr-1.5 font-semibold">
+            {username}
+          </Link>
+          <RichText text={text} />
+        </p>
+        <p className="mt-1 flex items-center gap-3 text-xs text-zinc-500">
+          <time dateTime={createdAt}>{timeAgo(createdAt)}</time>
+          {mine ? (
+            <button
+              type="button"
+              onClick={() => void db.delete("Comment", comment.id)}
+              className="hidden items-center gap-1 hover:text-zinc-900 group-hover:inline-flex"
+              aria-label="Delete comment"
+            >
+              <X className="size-3" /> Delete
+            </button>
+          ) : null}
+        </p>
+      </div>
+    </li>
+  );
+}
+

package/templates/consumer/components/social/profile-screen.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState } from "react";
+import { Link } from "@pylonsync/react";
+import { Bookmark, Grid3x3 } from "lucide-react";
+import { formatCount } from "@/lib/social";
+import { cn } from "@/lib/utils";
+import { Avatar } from "./avatar";
+import { EditProfileDialog } from "./edit-profile";
+import { GridSkeleton, PostGrid } from "./post-grid";
+import { SocialGate } from "./session";
+import { actions, useSocial } from "./use-social";
+
+export function ProfileScreen({ username }: { username: string }) {
+  return (
+    <div className="mx-auto max-w-[935px] pb-8 sm:px-5 sm:pt-8">
+      <SocialGate fallback={<GridSkeleton />}>
+        <LiveProfile username={username.toLowerCase()} />
+      </SocialGate>
+    </div>
+  );
+}
+
+function LiveProfile({ username }: { username: string }) {
+  const social = useSocial();
+  const [tab, setTab] = useState<"posts" | "saved">("posts");
+  const [editing, setEditing] = useState(false);
+  const profile = social.profileByUsername.get(username);
+
+  if (!profile) {
+    return social.loading || social.profiles.length === 0 ? (
+      <GridSkeleton />
+    ) : (
+      <div className="py-24 text-center">
+        <p className="text-lg font-semibold">This profile is not available.</p>
+        <p className="mt-2 text-sm text-zinc-500">The username may have changed.</p>
+        <Link href="/" className="mt-4 inline-block text-sm font-semibold text-brand">
+          Back to the feed
+        </Link>
+      </div>
+    );
+  }
+
+  const mine = profile.userId === social.me;
+  const posts = social.postsByAuthor.get(profile.userId) ?? [];
+  const saved = mine ? social.posts.filter((p) => social.mySaves.has(p.id)) : [];
+  const following = social.following.has(profile.userId);
+  const followsYou = social.follows.some((f) => f.followerId === profile.userId && f.followingId === social.me);
+  const stats = [
+    { label: posts.length === 1 ? "post" : "posts", value: posts.length },
+    { label: (social.followerCount.get(profile.userId) ?? 0) === 1 ? "follower" : "followers", value: social.followerCount.get(profile.userId) ?? 0 },
+    { label: "following", value: social.followingCount.get(profile.userId) ?? 0 },
+  ];
+
+  const button = mine ? (
+    <button type="button" onClick={() => setEditing(true)} className="rounded-lg bg-zinc-100 px-4 py-1.5 text-sm font-semibold hover:bg-zinc-200">
+      Edit profile
+    </button>
+  ) : (
+    <button
+      type="button"
+      onClick={() => actions.toggleFollow(social, profile.userId)}
+      className={cn(
+        "rounded-lg px-5 py-1.5 text-sm font-semibold",
+        following ? "bg-zinc-100 hover:bg-zinc-200" : "bg-brand text-white hover:opacity-90",
+      )}
+    >
+      {following ? "Following" : followsYou ? "Follow back" : "Follow"}
+    </button>
+  );
+
+  return (
+    <>
+      <header className="flex gap-6 px-4 pt-4 sm:gap-20 sm:px-12 sm:pt-0">
+        <Avatar profile={profile} size={150} className="hidden sm:inline-block" />
+        <Avatar profile={profile} size={80} className="sm:hidden" />
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-3 sm:gap-5">
+            <h1 className="truncate text-xl">{profile.username}</h1>
+            {button}
+          </div>
+          <ul className="mt-5 hidden gap-10 text-base sm:flex">
+            {stats.map((s) => (
+              <li key={s.label}>
+                <span className="font-semibold">{formatCount(s.value)}</span> {s.label}
+              </li>
+            ))}
+          </ul>
+          <p className="mt-4 text-sm font-semibold">{profile.displayName}</p>
+          {profile.bio ? <p className="mt-0.5 whitespace-pre-line text-sm">{profile.bio}</p> : null}
+        </div>
+      </header>
+
+      <ul className="mt-6 flex justify-around border-y py-3 text-center text-sm sm:hidden">
+        {stats.map((s) => (
+          <li key={s.label}>
+            <span className="block font-semibold">{formatCount(s.value)}</span>
+            <span className="text-zinc-500">{s.label}</span>
+          </li>
+        ))}
+      </ul>
+
+      <nav className="mt-2 flex justify-center gap-14 border-t sm:mt-11">
+        <TabButton on={tab === "posts"} onClick={() => setTab("posts")} icon={<Grid3x3 className="size-3.5" />}>
+          Posts
+        </TabButton>
+        {mine ? (
+          <TabButton on={tab === "saved"} onClick={() => setTab("saved")} icon={<Bookmark className="size-3.5" />}>
+            Saved
+          </TabButton>
+        ) : null}
+      </nav>
+
+      {tab === "posts" ? (
+        posts.length ? (
+          <PostGrid social={social} posts={posts} />
+        ) : (
+          <p className="py-16 text-center text-sm text-zinc-500">{mine ? "Share your first photo with Create." : "No posts yet."}</p>
+        )
+      ) : saved.length ? (
+        <PostGrid social={social} posts={saved} />
+      ) : (
+        <p className="py-16 text-center text-sm text-zinc-500">Only you can see what you save.</p>
+      )}
+
+      {mine ? <EditProfileDialog profile={profile} open={editing} onOpenChange={setEditing} /> : null}
+    </>
+  );
+}
+
+function TabButton({ on, onClick, icon, children }: { on: boolean; onClick: () => void; icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={on}
+      className={cn(
+        "-mt-px flex items-center gap-1.5 border-t py-4 text-xs font-semibold tracking-wide",
+        on ? "border-zinc-900 text-zinc-900" : "border-transparent text-zinc-500 hover:text-zinc-700",
+      )}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}

package/templates/consumer/components/social/rich-text.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { splitMentions } from "@/lib/social";
+
+/** Text with each @username linked to its profile. */
+export function RichText({ text }: { text: string }) {
+  return (
+    <>
+      {splitMentions(text).map((part, i) =>
+        part.kind === "text" ? (
+          <React.Fragment key={i}>{part.text}</React.Fragment>
+        ) : (
+          <Link key={i} href={`/u/${part.username}`} className="text-brand hover:underline">
+            @{part.username}
+          </Link>
+        ),
+      )}
+    </>
+  );
+}

package/templates/consumer/components/social/session.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { callFn } from "@pylonsync/react";
+import { EnsureGuest } from "@pylonsync/client";
+
+// Every island on a page mounts its own <SocialGate>, so the first-visit work
+// runs once per page load, not once per island: load the demo data, then make
+// sure the visitor has a profile.
+let bootstrap: Promise<void> | null = null;
+
+function bootstrapOnce(): Promise<void> {
+  bootstrap ??= (async () => {
+    await callFn("seedFeed", {});
+    await callFn("ensureProfile", {});
+  })().catch((error) => {
+    // Let the next island retry instead of keeping a failed promise.
+    bootstrap = null;
+    throw error;
+  });
+  return bootstrap;
+}
+
+/**
+ * A guest session for anyone who opens the app, so they can like, comment,
+ * follow, and post without a sign-up form. Children render as soon as the
+ * session exists; live queries fill in as the demo data and profile arrive.
+ */
+export function SocialGate({ children, fallback = null }: { children: React.ReactNode; fallback?: React.ReactNode }) {
+  return (
+    <EnsureGuest fallback={fallback}>
+      <Bootstrap />
+      {children}
+    </EnsureGuest>
+  );
+}
+
+function Bootstrap() {
+  useEffect(() => {
+    void bootstrapOnce().catch(() => {});
+  }, []);
+  return null;
+}