{placeholder}

setContent(event.target.value)}
        />
        <div className="flex justify-end">
          <Button type="submit" size="sm" disabled={!content.trim() || pending}>
            {submitLabel}
          </Button>
        </div>
      </div>
    </form>
  );
}

/**
 * Nested reply thread for an ActivityPub object.
 *
 * Replies are `Note` objects carrying `inReplyTo`; new replies are emitted as
 * `Create` activities addressed to the same audience helper the composer uses.
 * Every comment is marked up as a Schema.org `Comment`.
 */
function CommentThread({
  object,
  replies,
  viewer,
  maxDepth = 3,
  initialCount = 3,
  onReply,
  onLike,
  onUnlike,
  includeJsonLd = false,
  now,
  locale,
  hideComposer = false,
  className,
  ...props
}: CommentThreadProps) {
  const [expanded, setExpanded] = React.useState(false);
  /** Locally added replies, so the thread grows without a refetch. */
  const [optimistic, setOptimistic] = React.useState<ActivityPubObject[]>([]);

const source = React.useMemo(
    () => [...getCollectionItems(replies ?? object.replies), ...optimistic],
    [object.replies, optimistic, replies],
  );
  const tree = React.useMemo(() => buildCommentTree(source, object.id), [object.id, source]);
  const visible = expanded ? tree : tree.slice(0, initialCount);
  const hidden = tree.length - visible.length;

const handleSubmitReply = React.useCallback(
    async (parent: ActivityPubObject, content: string) => {
      if (!viewer) {
        return;
      }

const activity = createNoteActivity({
        actor: viewer,
        content,
        inReplyTo: parent.id,
        visibility: "public",
      });

setOptimistic((current) => [...current, activity.object]);
      await onReply?.(activity);
    },
    [onReply, viewer],
  );

return (
    <div className={cn("flex w-full flex-col gap-3", className)} {...props}>
      {includeJsonLd ? <JsonLd data={source.map((reply) => toCommentJsonLd(reply))} /> : null}

{tree.length > 0 ? (
        <ul className="m-0 flex list-none flex-col gap-3 p-0">
          {visible.map((node) => (
            <Comment
              key={node.object.id}
              node={node}
              depth={0}
              maxDepth={maxDepth}
              viewer={viewer}
              now={now}
              locale={locale}
              onSubmitReply={handleSubmitReply}
              onLike={onLike}
              onUnlike={onUnlike}
            />
          ))}
        </ul>
      ) : null}

{hidden > 0 ? (
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="w-fit px-1.5 text-xs"
          onClick={() => setExpanded(true)}
        >
          View {hidden} more {hidden === 1 ? "comment" : "comments"}
        </Button>
      ) : null}

{hideComposer || !viewer ? null : (
        <CommentComposer
          viewer={viewer}
          placeholder="Write a comment..."
          submitLabel="Comment"
          onSubmit={(content) => handleSubmitReply(object, content)}
        />
      )}
    </div>
  );
}

export { CommentThread, buildCommentTree, type CommentNode, type CommentThreadProps };
```

## Usage

Builds a nested conversation from a flat list of replies and lets the viewer add to it.

```tsx
import { CommentThread } from "@/components/ui/comment-thread";

<CommentThread
  object={note}
  replies={note.replies}
  viewer={viewer}
  onReply={(activity) => postToOutbox(viewer, activity)}
/>
```

Replies default to the object's own `replies` collection, so a post fetched from an outbox works
without a second prop.

### Threading

`buildCommentTree` groups replies by `inReplyTo`. Replies whose parent is not in the list are
attached at the root rather than dropped, so a partially loaded conversation still renders in full.
Nesting stops at `maxDepth` (default `3`) and deeper replies flatten into the last level.

```ts
import { buildCommentTree } from "@/components/ui/comment-thread";

const roots = buildCommentTree(replies, note.id);
```

### Replying

New replies are emitted as `Create` activities carrying `inReplyTo`, and appear immediately while
`onReply` settles. Root replies beyond `initialCount` collapse behind a "view more" control, and
nested replies collapse behind "view N replies".

### Structured data

Each comment carries Schema.org `Comment` microdata with `author`, `text`, `datePublished`, and
`parentItem`. Add `includeJsonLd` to emit the thread as JSON-LD as well.

Pass `hideComposer` for a read-only permalink view. Omitting `viewer` also hides it, since there is
no actor to attribute a reply to.

---

URL: https://ui.uptoolkit.com/components/example-card.md

A compact card component that demonstrates shadcn registry dependencies.

# Example Card

A compact card component that demonstrates shadcn registry dependencies.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/example-card.json
```

[Registry JSON](https://ui.uptoolkit.com/r/example-card.json)

## Preview

```tsx
import { ExampleCard } from "@/components/ui/example-card";

export function Preview() {
  return <ExampleCard />;
}
```

## Source

### ui/example-card.tsx

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

type ExampleCardProps = {
  title?: string;
  description?: string;
  status?: string;
};

function ExampleCard({
  title = "Ready to publish",
  description = "Use this component as a small, installable starter item.",
  status = "Template",
}: ExampleCardProps) {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <div className="flex items-center justify-between gap-3">
          <CardTitle>{title}</CardTitle>
          <Badge variant="secondary">{status}</Badge>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          Replace this example with a component from your own registry.
        </p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Open docs</Button>
      </CardFooter>
    </Card>
  );
}

export { ExampleCard, type ExampleCardProps };
```

## Usage

Use the card anywhere you need a compact content summary with a title, description, status badge,
and action.

```tsx
import { ExampleCard } from "@/components/ui/example-card";

<ExampleCard title="Hello" description="world!" />
```

---

URL: https://ui.uptoolkit.com/components/follow-button.md

Follow control that emits ActivityPub Follow and Undo activities.

# Follow Button

Follow control that emits ActivityPub Follow and Undo activities.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/follow-button.json
```

[Registry JSON](https://ui.uptoolkit.com/r/follow-button.json)

## Preview

```tsx
import * as React from "react";

import { getActorHandle } from "@/lib/activitypub";
import {
  sampleAuthor,
  sampleFollowers,
  sampleViewer,
} from "@/lib/social-sample-data";
import { FollowButton, type FollowState } from "@/components/ui/follow-button";

const targets = [sampleAuthor, sampleFollowers[2]];

export function Preview() {
  const [log, setLog] = React.useState<string[]>([]);

return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {targets.map((actor) => (
        <div
          key={actor.id}
          className="flex items-center justify-between gap-3 rounded-md border p-3"
        >
          <span className="flex flex-col text-sm">
            <span className="font-medium">{actor.name}</span>
            <span className="text-xs text-muted-foreground">{getActorHandle(actor)}</span>
          </span>
          <FollowButton
            actor={actor}
            viewer={sampleViewer}
            onFollow={(activity) => setLog((l) => [`${activity.type} -> ${activity.object}`, ...l])}
            onUnfollow={(activity) =>
              setLog((l) => [`${activity.type} ${activity.object.type}`, ...l])
            }
            onStateChange={(state: FollowState) => setLog((l) => [`state: ${state}`, ...l])}
          />
        </div>
      ))}
      <p className="m-0 text-xs text-muted-foreground">
        {log[0] ?? "Follow an actor to emit an activity."}
      </p>
    </div>
  );
}
```

## Source

### ui/follow-button.tsx

```tsx
"use client";

import { IconCheck, IconClock, IconPlus, IconUserMinus } from "@tabler/icons-react";
import * as React from "react";

import { Button } from "@/components/ui/button";

import {
  createFollowActivity,
  createUndoActivity,
  getActorDisplayName,
  type ActivityPubActivity,
  type ActivityPubActor,
} from "@/lib/activitypub";

/** Mirrors the ActivityPub follow lifecycle: Follow -> Accept, or Undo. */
type FollowState = "none" | "requested" | "following";

type FollowButtonProps = Omit<
  React.ComponentProps<typeof Button>,
  "children" | "onClick" | "value" | "defaultValue"
> & {
  /** The actor being followed. */
  actor: ActivityPubActor;
  /** The signed-in actor. Required to build a deliverable activity. */
  viewer?: ActivityPubActor;
  /** Controlled state. Omit to let the button manage its own state. */
  state?: FollowState;
  defaultState?: FollowState;
  onStateChange?: (state: FollowState) => void;
  /**
   * Called with the `Follow` activity to POST to the viewer's outbox. Resolve to
   * `false` to roll the optimistic state back.
   */
  onFollow?: (activity: ActivityPubActivity<string>) => void | boolean | Promise<void | boolean>;
  /** Called with the `Undo` activity that retracts the follow. */
  onUnfollow?: (
    activity: ActivityPubActivity<ActivityPubActivity<string>>,
  ) => void | boolean | Promise<void | boolean>;
  /** Swaps the following label for "Unfollow" on hover and focus. */
  showUnfollowOnHover?: boolean;
};

const stateLabels: Record<FollowState, string> = {
  none: "Follow",
  requested: "Requested",
  following: "Following",
};

/**
 * Follow control for an ActivityPub actor.
 *
 * Follows are optimistic: the label updates immediately, then reverts if the
 * handler resolves to `false`. Actors with `manuallyApprovesFollowers` move to
 * `requested` instead of `following`, matching the server's Accept flow.
 */
function FollowButton({
  actor,
  viewer,
  state: controlledState,
  defaultState = "none",
  onStateChange,
  onFollow,
  onUnfollow,
  showUnfollowOnHover = true,
  className,
  disabled,
  size = "sm",
  ...props
}: FollowButtonProps) {
  const [uncontrolledState, setUncontrolledState] = React.useState<FollowState>(defaultState);
  const [pending, setPending] = React.useState(false);
  const [intentVisible, setIntentVisible] = React.useState(false);

const state = controlledState ?? uncontrolledState;
  const isFollowing = state === "following" || state === "requested";
  /** Track the sent Follow so Undo can reference the exact activity id. */
  const followActivityRef = React.useRef<ActivityPubActivity<string> | null>(null);

const commitState = React.useCallback(
    (next: FollowState) => {
      if (controlledState === undefined) {
        setUncontrolledState(next);
      }

onStateChange?.(next);
    },
    [controlledState, onStateChange],
  );

const handleClick = React.useCallback(async () => {
    if (pending) {
      return;
    }

const previous = state;
    const next: FollowState = isFollowing
      ? "none"
      : actor.manuallyApprovesFollowers
        ? "requested"
        : "following";

commitState(next);
    setPending(true);

try {
      if (!viewer) {
        return;
      }

if (isFollowing) {
        const follow =
          followActivityRef.current ?? createFollowActivity({ actor: viewer, object: actor });
        const result = await onUnfollow?.(createUndoActivity({ actor: viewer, activity: follow }));

followActivityRef.current = null;

if (result === false) {
          commitState(previous);
        }

return;
      }

const follow = createFollowActivity({ actor: viewer, object: actor });

followActivityRef.current = follow;

const result = await onFollow?.(follow);

if (result === false) {
        followActivityRef.current = null;
        commitState(previous);
      }
    } finally {
      setPending(false);
    }
  }, [actor, commitState, isFollowing, onFollow, onUnfollow, pending, state, viewer]);

const showUnfollowIntent = showUnfollowOnHover && isFollowing && intentVisible;
  const label = showUnfollowIntent ? "Unfollow" : stateLabels[state];
  const Icon = showUnfollowIntent
    ? IconUserMinus
    : state === "following"
      ? IconCheck
      : state === "requested"
        ? IconClock
        : IconPlus;

return (
    <Button
      type="button"
      size={size}
      variant={isFollowing ? "outline" : "default"}
      aria-pressed={isFollowing}
      aria-label={`${label} ${getActorDisplayName(actor)}`}
      disabled={disabled || pending}
      className={className}
      onClick={() => void handleClick()}
      onMouseEnter={() => setIntentVisible(true)}
      onMouseLeave={() => setIntentVisible(false)}
      onFocus={() => setIntentVisible(true)}
      onBlur={() => setIntentVisible(false)}
      {...props}
    >
      <Icon aria-hidden="true" />
      {label}
    </Button>
  );
}

export { FollowButton, type FollowButtonProps, type FollowState };
```

## Usage

Emits real activities rather than calling an opaque callback: `onFollow` receives a `Follow` and
`onUnfollow` receives an `Undo` wrapping the exact `Follow` that was sent, which is what an
ActivityPub server needs to retract the relationship.

```tsx
import { FollowButton } from "@/components/ui/follow-button";

<FollowButton
  actor={actor}
  viewer={viewer}
  onFollow={(activity) => postToOutbox(viewer, activity)}
  onUnfollow={(activity) => postToOutbox(viewer, activity)}
/>
```

### Optimistic state

The label changes immediately. Return `false` from either handler to roll it back:

```tsx
<FollowButton
  actor={actor}
  viewer={viewer}
  onFollow={async (activity) => {
    const response = await postToOutbox(viewer, activity);
    return response.ok;
  }}
/>
```

### Follow requests

Actors with `manuallyApprovesFollowers` go to `requested` instead of `following`, matching the
server's pending `Accept`. Once the `Accept` arrives, drive the button as controlled:

```tsx
<FollowButton actor={actor} viewer={viewer} state={relationship} onStateChange={setRelationship} />
```

Hovering or focusing a followed actor swaps the label to "Unfollow"; pass
`showUnfollowOnHover={false}` to keep it static. `aria-pressed` always reflects the relationship.

---

URL: https://ui.uptoolkit.com/components/json-ld.md

Renders a safely serialized application/ld+json script tag.

# JSON-LD

Renders a safely serialized application/ld+json script tag.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/json-ld.json
```

[Registry JSON](https://ui.uptoolkit.com/r/json-ld.json)

## Preview

```tsx
import { JsonLd, serializeJsonLd } from "@/components/json-ld";

const data = {
  "@context": "https://schema.org",
  "@type": "SocialMediaPosting",
  "@id": "https://social.example/users/ada/posts/1",
  text: "Structured data ships with the markup </script>",
  author: { "@type": "Person", name: "Ada Okoye" },
};

export function Preview() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-2 text-left">
      <JsonLd data={data} id="preview-json-ld" />
      <p className="m-0 text-sm text-muted-foreground">
        The script tag is in the document. Its escaped contents:
      </p>
      <pre className="m-0 overflow-auto rounded-md bg-muted p-3 text-xs">
        {serializeJsonLd(data, 2)}
      </pre>
    </div>
  );
}
```

## Source

### components/json-ld.tsx

```tsx
/**
 * Renders JSON-LD structured data as an `application/ld+json` script tag.
 *
 * @see https://json-ld.org/spec/latest/json-ld/#embedding-json-ld-in-html-documents
 */

/** Kept as named constants so the source file stays pure ASCII. */
const LINE_SEPARATOR = "\u2028";
const PARAGRAPH_SEPARATOR = "\u2029";

const scriptEscapes: Record<string, string> = {
  "<": "\\u003c",
  ">": "\\u003e",
  "&": "\\u0026",
  [LINE_SEPARATOR]: "\\u2028",
  [PARAGRAPH_SEPARATOR]: "\\u2029",
};

const unsafeScriptCharacters = /[<>&\u2028\u2029]/gu;

function escapeJsonForScript(json: string): string {
  return json.replace(unsafeScriptCharacters, (char) => scriptEscapes[char] ?? char);
}

/**
 * Serializes JSON-LD for inline embedding.
 *
 * `<`, `>`, and `&` are escaped so a value containing `</script>` cannot close
 * the tag early, and U+2028/U+2029 are escaped because they are valid in JSON
 * but illegal raw inside a JavaScript string literal.
 */
function serializeJsonLd(data: unknown, space?: number): string {
  return escapeJsonForScript(JSON.stringify(data, null, space) ?? "null");
}

type JsonLdProps = {
  /** A single node, or several nodes rendered as a JSON-LD array. */
  data: unknown;
  /** Optional `id` so a framework can dedupe or replace the tag. */
  id?: string;
  /** Pretty-print with the given indent. Useful while debugging. */
  space?: number;
};

function JsonLd({ data, id, space }: JsonLdProps) {
  if (data === null || data === undefined) {
    return null;
  }

if (Array.isArray(data) && data.length === 0) {
    return null;
  }

return (
    <script
      type="application/ld+json"
      id={id}
      suppressHydrationWarning
      // Escaped by serializeJsonLd: JSON.stringify output is never raw markup.
      dangerouslySetInnerHTML={{ __html: serializeJsonLd(data, space) }}
    />
  );
}

export { JsonLd, serializeJsonLd, type JsonLdProps };
```

## Usage

Emits structured data as an `application/ld+json` script tag. Works in a server component, a client
component, or anywhere else you can render an element.

```tsx
import { JsonLd } from "@/components/json-ld";

<JsonLd data={{ "@context": "https://schema.org", "@type": "Person", name: "Ada Okoye" }} />
```

Pass an array to emit several nodes at once. `null`, `undefined`, and empty arrays render nothing, so
you can hand it optional data without guarding the call site.

### Escaping

`JSON.stringify` alone is not safe to interpolate into HTML. `serializeJsonLd` escapes `<`, `>`, and
`&` so a value containing `</script>` cannot terminate the tag early, and escapes U+2028 / U+2029,
which are legal in JSON but not inside a JavaScript string literal.

```tsx
serializeJsonLd({ text: "</script><script>alert(1)</script>" });
// {"text":"</script><script>alert(1)</script>"}
```

Pass `space` to pretty-print while debugging, and `id` if your framework needs to dedupe or replace
the tag between navigations.

---

URL: https://ui.uptoolkit.com/components/post-card.md

Renders an ActivityPub Note or Article with Schema.org SocialMediaPosting markup.

# Post Card

Renders an ActivityPub Note or Article with Schema.org SocialMediaPosting markup.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/post-card.json
```

[Registry JSON](https://ui.uptoolkit.com/r/post-card.json)

## Preview

```tsx
import {
  SAMPLE_NOW,
  sampleAnnounce,
  samplePost,
  sampleViewer,
  sensitivePost,
} from "@/lib/social-sample-data";
import { PostCard } from "@/components/ui/post-card";

export function Preview() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <PostCard object={samplePost} viewer={sampleViewer} now={SAMPLE_NOW} includeJsonLd />
      <PostCard
        object={sampleAnnounce.object}
        activity={sampleAnnounce}
        viewer={sampleViewer}
        now={SAMPLE_NOW}
      />
      <PostCard object={sensitivePost} viewer={sampleViewer} now={SAMPLE_NOW} />
    </div>
  );
}
```

## Source

### ui/post-card.tsx

```tsx
"use client";

import {
  IconAlertTriangle,
  IconDots,
  IconGlobe,
  IconLock,
  IconMail,
  IconRepeat,
  IconUsers,
} from "@tabler/icons-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

import {
  formatPublishedTime,
  getActorDisplayName,
  getActorHandle,
  getObjectParagraphs,
  getTags,
  getVisibility,
  resolveActor,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubDocument,
  type ActivityPubObject,
  type ActivityPubVisibility,
} from "@/lib/activitypub";
import { toSocialMediaPostingJsonLd } from "@/lib/schema-org";
import { ActorAvatar } from "@/components/ui/actor-avatar";
import { JsonLd } from "@/components/json-ld";
import { ReactionBar, type ReactionBarProps } from "@/components/ui/reaction-bar";

const visibilityIcons: Record<ActivityPubVisibility, typeof IconGlobe> = {
  public: IconGlobe,
  unlisted: IconLock,
  followers: IconUsers,
  direct: IconMail,
};

const visibilityLabels: Record<ActivityPubVisibility, string> = {
  public: "Public",
  unlisted: "Unlisted",
  followers: "Followers only",
  direct: "Mentioned people only",
};

/** Facebook-style attachment grids, keyed by attachment count. */
const attachmentGrids: Record<number, string> = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-2 [&>*:first-child]:row-span-2",
  4: "grid-cols-2",
};

type PostCardProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
  /** The `Note`, `Article`, or other object to render. */
  object: ActivityPubObject;
  /**
   * The wrapping activity. An `Announce` renders the "boosted" attribution
   * header above the post.
   */
  activity?: ActivityPubActivity;
  /** The signed-in actor, forwarded to the reaction bar. */
  viewer?: ActivityPubActor;
  counts?: ReactionBarProps["counts"];
  viewerState?: ReactionBarProps["state"];
  defaultViewerState?: ReactionBarProps["defaultState"];
  onLike?: ReactionBarProps["onLike"];
  onUnlike?: ReactionBarProps["onUnlike"];
  onShare?: ReactionBarProps["onShare"];
  onUnshare?: ReactionBarProps["onUnshare"];
  onReply?: ReactionBarProps["onReply"];
  onMore?: (object: ActivityPubObject) => void;
  /**
   * Custom body renderer. The default renders sanitized plain text with
   * linkified hashtags and mentions; pass your own to render trusted HTML.
   */
  renderContent?: (object: ActivityPubObject) => React.ReactNode;
  /** Renders below the footer. Use for a comment thread. */
  children?: React.ReactNode;
  /** Emits a Schema.org `SocialMediaPosting` JSON-LD script. */
  includeJsonLd?: boolean;
  /**
   * Fixed "now" for relative timestamps. Pass a stable value on the server to
   * avoid a hydration mismatch.
   */
  now?: Date | number;
  /** BCP 47 locale for dates and counts. Must match on server and client. */
  locale?: string;
  hideActions?: boolean;
};

function PostAttachments({ attachments }: { attachments: readonly ActivityPubDocument[] }) {
  const visible = attachments.slice(0, 4);
  const overflow = attachments.length - visible.length;

return (
    <div
      className={cn(
        "grid gap-0.5 overflow-hidden rounded-lg border",
        attachmentGrids[visible.length] ?? "grid-cols-2",
      )}
    >
      {visible.map((attachment, index) => (
        <figure key={attachment.url} className="relative m-0">
          {attachment.type === "Video" || attachment.type === "Audio" ? (
            <div className="flex aspect-video items-center justify-center bg-muted text-xs text-muted-foreground">
              {attachment.name ?? attachment.type}
            </div>
          ) : (
            <img
              src={attachment.url}
              alt={attachment.name ?? ""}
              width={attachment.width}
              height={attachment.height}
              loading="lazy"
              itemProp="image"
              className={cn(
                "size-full object-cover",
                visible.length === 1 ? "max-h-96" : "aspect-square",
              )}
            />
          )}
          {index === visible.length - 1 && overflow > 0 ? (
            <figcaption className="absolute inset-0 flex items-center justify-center bg-black/55 text-lg font-semibold text-white">
              +{overflow}
            </figcaption>
          ) : null}
        </figure>
      ))}
    </div>
  );
}

type ContentToken = { key: string; text: string; href?: string };
type ContentParagraph = { key: string; tokens: ContentToken[] };

/**
 * Splits the plain-text body into paragraphs and tokens, linking hashtags and
 * mentions to the hrefs carried in the object's `tag` array.
 *
 * Keys are byte offsets into the body rather than array indices, so repeated
 * words do not collide and reordered content does not remount the wrong node.
 */
function getContentParagraphs(object: ActivityPubObject): ContentParagraph[] {
  const mentions = new Map(getTags(object, "Mention").map((tag) => [tag.name, tag.href]));
  const hashtags = new Map(getTags(object, "Hashtag").map((tag) => [tag.name, tag.href]));
  const paragraphs: ContentParagraph[] = [];
  let offset = 0;

for (const paragraph of getObjectParagraphs(object)) {
    const tokens: ContentToken[] = [];
    let cursor = offset;

for (const text of paragraph.split(/(\s+)/u)) {
      const href = mentions.get(text) ?? hashtags.get(text);

tokens.push({ key: `t${cursor}`, text, ...(href ? { href } : {}) });
      cursor += text.length;
    }

paragraphs.push({ key: `p${offset}`, tokens });
    offset = cursor + 2;
  }

return paragraphs;
}

/** Plain-text body with hashtags and mentions turned into links. */
function PostContent({ object }: { object: ActivityPubObject }) {
  return (
    <div className="flex flex-col gap-2 text-sm leading-relaxed whitespace-pre-wrap">
      {getContentParagraphs(object).map((paragraph) => (
        <p key={paragraph.key} className="m-0">
          {paragraph.tokens.map((token) =>
            token.text.length > 1 && /^[#@]/u.test(token.text) ? (
              <a
                key={token.key}
                href={token.href ?? `#${encodeURIComponent(token.text)}`}
                className="font-medium text-primary hover:underline"
              >
                {token.text}
              </a>
            ) : (
              token.text
            ),
          )}
        </p>
      ))}
    </div>
  );
}

/**
 * Renders an ActivityPub object as a social post.
 *
 * The markup carries Schema.org microdata (`SocialMediaPosting`) inline and can
 * additionally emit a JSON-LD script. Sensitive posts stay collapsed behind
 * their `summary` content warning until the reader opens them.
 */
function PostCard({
  object,
  activity,
  viewer,
  counts,
  viewerState,
  defaultViewerState,
  onLike,
  onUnlike,
  onShare,
  onUnshare,
  onReply,
  onMore,
  renderContent,
  children,
  includeJsonLd = false,
  now,
  locale,
  hideActions = false,
  className,
  ...props
}: PostCardProps) {
  const [warningOpen, setWarningOpen] = React.useState(false);

return (
    <Card
      className={cn("w-full gap-3 py-4", className)}
      itemScope
      itemType="https://schema.org/SocialMediaPosting"
      itemID={object.id}
      {...props}
    >
      <meta itemProp="url" content={permalink} />
      {object.published ? <meta itemProp="datePublished" content={object.published} /> : null}
      {object.updated ? <meta itemProp="dateModified" content={object.updated} /> : null}
      {includeJsonLd ? (
        <JsonLd data={toSocialMediaPostingJsonLd(object, { counts, includeComments: true })} />
      ) : null}

<CardHeader className="gap-2">
        {booster ? (
          <p className="m-0 flex items-center gap-1.5 text-xs text-muted-foreground">
            <IconRepeat aria-hidden="true" className="size-3.5" />
            <span>
              <span className="font-medium text-foreground">{getActorDisplayName(booster)}</span>{" "}
              boosted
            </span>
          </p>
        ) : null}

<div className="flex items-start gap-3">
          {author ? <ActorAvatar actor={author} size="lg" /> : null}
          <div className="flex min-w-0 flex-1 flex-col">
            {author ? (
              <span
                className="flex flex-wrap items-center gap-x-1.5 text-sm"
                itemProp="author"
                itemScope
                itemType={
                  author.type === "Organization" || author.type === "Group"
                    ? "https://schema.org/Organization"
                    : "https://schema.org/Person"
                }
              >
                <a
                  href={author.url ?? author.id}
                  className="font-semibold hover:underline"
                  itemProp="url"
                >
                  <span itemProp="name">{getActorDisplayName(author)}</span>
                </a>
                <span className="truncate text-muted-foreground" itemProp="alternateName">
                  {getActorHandle(author)}
                </span>
              </span>
            ) : null}
            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
              {object.published ? (
                <a href={permalink} className="hover:underline">
                  <time dateTime={object.published}>{publishedLabel}</time>
                </a>
              ) : null}
              <VisibilityIcon
                aria-label={visibilityLabels[visibility]}
                className="size-3.5"
                role="img"
              />
              {object.location ? (
                <span itemProp="contentLocation">{object.location.name}</span>
              ) : null}
            </span>
          </div>

<Button
            type="button"
            variant="ghost"
            size="icon"
            aria-label="Post options"
            onClick={() => onMore?.(object)}
          >
            <IconDots aria-hidden="true" />
          </Button>
        </div>
      </CardHeader>

<CardContent className="flex flex-col gap-3">
        {object.name ? (
          <h3 className="m-0 text-base font-semibold" itemProp="headline">
            {object.name}
          </h3>
        ) : null}

{sensitive ? (
          <div className="flex flex-wrap items-center gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 p-2 text-sm">
            <IconAlertTriangle aria-hidden="true" className="size-4 text-amber-600" />
            <span className="flex-1" itemProp="abstract">
              {object.summary}
            </span>
            <Button
              type="button"
              variant="outline"
              size="sm"
              aria-expanded={warningOpen}
              onClick={() => setWarningOpen((open) => !open)}
            >
              {warningOpen ? "Hide" : "Show"}
            </Button>
          </div>
        ) : null}

{contentHidden ? null : (
          <div itemProp="articleBody">
            {renderContent ? renderContent(object) : <PostContent object={object} />}
          </div>
        )}

{!contentHidden && object.attachment?.length ? (
          <PostAttachments attachments={object.attachment} />
        ) : null}

{getTags(object, "Hashtag").length > 0 ? (
          <div className="flex flex-wrap gap-1">
            {getTags(object, "Hashtag").map((tag) => (
              <Badge key={tag.name} variant="secondary" className="font-normal">
                <meta itemProp="keywords" content={tag.name.replace(/^#/u, "")} />
                {tag.name}
              </Badge>
            ))}
          </div>
        ) : null}
      </CardContent>

{hideActions ? null : (
        <>
          <Separator />
          <CardFooter className="flex-col items-stretch gap-3">
            <ReactionBar
              object={object}
              viewer={viewer}
              counts={counts}
              state={viewerState}
              defaultState={defaultViewerState}
              onLike={onLike}
              onUnlike={onUnlike}
              onShare={onShare}
              onUnshare={onUnshare}
              onReply={onReply}
              locale={locale}
            />
            {children}
          </CardFooter>
        </>
      )}
    </Card>
  );
}

export { PostCard, PostContent, type PostCardProps };
```

## Usage

Renders any ActivityPub object as a social post: author identity, visibility, content warning,
attachment grid, hashtags, and the reaction bar.

```tsx
import { PostCard } from "@/components/ui/post-card";

<PostCard object={note} viewer={viewer} now={renderedAt} />
```

### Boosts

Pass the wrapping activity. An `Announce` renders the "boosted" attribution above the post while the
body stays attributed to the original author.

```tsx
<PostCard object={getActivityObject(activity)} activity={activity} viewer={viewer} />
```

### Structured data

Schema.org microdata is always in the markup — `SocialMediaPosting` on the root, with `author`,
`datePublished`, `articleBody`, `image`, and `keywords` on the nodes inside. Add `includeJsonLd` to
also emit a JSON-LD script, which is the form Google prefers:

```tsx
<PostCard object={note} includeJsonLd />
```

### Content rendering

Federated `content` is HTML from a server you do not control, so the default renderer converts it to
plain text and linkifies hashtags and mentions from the object's `tag` array. To render HTML, pass
your own renderer and sanitize it yourself:

```tsx
<PostCard
  object={note}
  renderContent={(object) => (
    <div dangerouslySetInnerHTML={{ __html: sanitize(object.content ?? "") }} />
  )}
/>
```

### Content warnings

When `sensitive` is set and `summary` is present, the body and attachments stay collapsed behind the
warning until the reader expands it.

### Composition

`children` render inside the footer under the reaction bar — the place for a comment thread. Pass
`hideActions` for a read-only card, and a fixed `now` when rendering on the server so relative
timestamps do not shift at hydration. Dates and counts format in `en` by default; pass `locale` —
the same value on server and client — for anything else.

---

URL: https://ui.uptoolkit.com/components/post-composer.md

Composer that emits an ActivityPub Create activity with audience targeting.

# Post Composer

Composer that emits an ActivityPub Create activity with audience targeting.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/post-composer.json
```

[Registry JSON](https://ui.uptoolkit.com/r/post-composer.json)

## Preview

```tsx
import * as React from "react";

import { getVisibility } from "@/lib/activitypub";
import { sampleViewer } from "@/lib/social-sample-data";
import { PostComposer } from "@/components/ui/post-composer";

export function Preview() {
  const [activity, setActivity] = React.useState<string | null>(null);

return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <PostComposer
        author={sampleViewer}
        onSubmit={(created) =>
          setActivity(
            `${created.type} -> ${getVisibility(created.object).visibility}, ${created.object.tag?.length ?? 0} tag(s)`,
          )
        }
      />
      <p className="m-0 text-xs text-muted-foreground">
        {activity ?? "Try @someone@example.social and #hashtags, then post."}
      </p>
    </div>
  );
}
```

## Source

### ui/post-composer.tsx

```tsx
"use client";

import {
  IconAlertTriangle,
  IconAt,
  IconChevronDown,
  IconGlobe,
  IconLock,
  IconMail,
  IconMoodSmile,
  IconPhoto,
  IconUsers,
} from "@tabler/icons-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

import {
  createNoteActivity,
  getActorDisplayName,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubDocument,
  type ActivityPubObject,
  type ActivityPubTag,
  type ActivityPubVisibility,
} from "@/lib/activitypub";
import { ActorAvatar } from "@/components/ui/actor-avatar";

const visibilityOptions: readonly {
  value: ActivityPubVisibility;
  label: string;
  description: string;
  icon: typeof IconGlobe;
}[] = [
  {
    value: "public",
    label: "Public",
    description: "Visible to everyone and listed in public timelines",
    icon: IconGlobe,
  },
  {
    value: "unlisted",
    label: "Unlisted",
    description: "Visible to everyone but hidden from public timelines",
    icon: IconLock,
  },
  {
    value: "followers",
    label: "Followers",
    description: "Only your followers can see this post",
    icon: IconUsers,
  },
  {
    value: "direct",
    label: "Mentioned only",
    description: "Only the people you mention can see this post",
    icon: IconMail,
  },
];

const mentionPattern = /@([\w.-]+)@([\w.-]+\.[a-z]{2,})/giu;
const hashtagPattern = /(?:^|\s)#([\p{L}\p{N}_]{1,64})/giu;

/** Extracts `Mention` and `Hashtag` tags so the activity carries real tags. */
function extractTags(content: string): ActivityPubTag[] {
  const mentions = Array.from(content.matchAll(mentionPattern), (match) => ({
    type: "Mention" as const,
    name: `@${match[1]}@${match[2]}`,
    href: `https://${match[2]}/users/${match[1]}`,
  }));
  const hashtags = Array.from(content.matchAll(hashtagPattern), (match) => ({
    type: "Hashtag" as const,
    name: `#${match[1]}`,
  }));
  const seen = new Set<string>();

return [...mentions, ...hashtags].filter((tag) => {
    const key = `${tag.type}:${tag.name.toLowerCase()}`;

if (seen.has(key)) {
      return false;
    }

seen.add(key);
    return true;
  });
}

type PostComposerProps = Omit<React.ComponentProps<typeof Card>, "children" | "onSubmit"> & {
  /** The signed-in actor the post is attributed to. */
  author: ActivityPubActor;
  placeholder?: string;
  defaultVisibility?: ActivityPubVisibility;
  /** Restrict the audience choices, or pass `false` to hide the selector. */
  visibilityOptions?: readonly ActivityPubVisibility[] | false;
  /** Character budget. Mastodon defaults to 500. */
  maxLength?: number;
  /** Reply target. Sets `inReplyTo` on the created object. */
  inReplyTo?: ActivityPubObject | string | null;
  attachments?: readonly ActivityPubDocument[];
  allowContentWarning?: boolean;
  submitLabel?: string;
  /** Receives the `Create` activity to POST to the author's outbox. */
  onSubmit?: (activity: ActivityPubActivity<ActivityPubObject>) => void | Promise<void>;
  onAttach?: () => void;
  /** Keep the typed content after submit. Defaults to clearing it. */
  preserveOnSubmit?: boolean;
};

/**
 * Composer that produces an ActivityPub `Create` activity.
 *
 * Visibility maps to real `to`/`cc` addressing, `@user@host` mentions and
 * `#hashtags` are extracted into `tag`, and a content warning sets `summary`
 * plus `sensitive`.
 */
function PostComposer({
  author,
  placeholder,
  defaultVisibility = "public",
  visibilityOptions: allowedVisibility,
  maxLength = 500,
  inReplyTo,
  attachments,
  allowContentWarning = true,
  submitLabel = "Post",
  onSubmit,
  onAttach,
  preserveOnSubmit = false,
  className,
  ...props
}: PostComposerProps) {
  const [content, setContent] = React.useState("");
  const [visibility, setVisibility] = React.useState<ActivityPubVisibility>(defaultVisibility);
  const [contentWarning, setContentWarning] = React.useState("");
  const [warningOpen, setWarningOpen] = React.useState(false);
  const [pending, setPending] = React.useState(false);

const choices = React.useMemo(() => {
    if (allowedVisibility === false) {
      return [];
    }

if (!allowedVisibility) {
      return visibilityOptions;
    }

return visibilityOptions.filter((option) => allowedVisibility.includes(option.value));
  }, [allowedVisibility]);

const selected = choices.find((option) => option.value === visibility) ?? visibilityOptions[0];
  const remaining = maxLength - Array.from(content).length;
  const canSubmit = content.trim().length > 0 && remaining >= 0 && !pending;
  const replyTargetId = typeof inReplyTo === "string" ? inReplyTo : inReplyTo?.id;

const handleSubmit = React.useCallback(
    async (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();

if (!canSubmit) {
        return;
      }

setPending(true);

try {
        await onSubmit?.(activity);

if (!preserveOnSubmit) {
          setContent("");
          setContentWarning("");
          setWarningOpen(false);
        }
      } finally {
        setPending(false);
      }
    },
    [
      attachments,
      author,
      canSubmit,
      content,
      contentWarning,
      onSubmit,
      preserveOnSubmit,
      replyTargetId,
      visibility,
      warningOpen,
    ],
  );

const composerId = React.useId();
  const contentId = `${composerId}-content`;
  const warningId = `${composerId}-warning`;
  const counterId = `${composerId}-counter`;

return (
    <Card className={cn("w-full", className)} {...props}>
      <form onSubmit={(event) => void handleSubmit(event)}>
        <CardContent className="flex gap-3">
          <ActorAvatar actor={author} size="lg" />
          <div className="flex min-w-0 flex-1 flex-col gap-2">
            {warningOpen ? (
              <Input
                id={warningId}
                value={contentWarning}
                onChange={(event) => setContentWarning(event.target.value)}
                placeholder="Content warning"
                aria-label="Content warning"
              />
            ) : null}
            <label className="sr-only" htmlFor={contentId}>
              {replyTargetId ? "Write a reply" : "Write a post"}
            </label>
            <Textarea
              id={contentId}
              value={content}
              onChange={(event) => setContent(event.target.value)}
              aria-describedby={counterId}
              aria-invalid={remaining < 0}
              placeholder={
                placeholder ??
                (replyTargetId
                  ? "Write a reply..."
                  : `What's on your mind, ${getActorDisplayName(author).split(" ")[0]}?`)
              }
              className="min-h-24 resize-y border-0 bg-transparent px-0 shadow-none focus-visible:ring-0 dark:bg-transparent"
            />
          </div>
        </CardContent>

<CardFooter className="flex flex-wrap items-center justify-between gap-2 pt-4">
          <div className="flex items-center gap-1">
            <Button
              type="button"
              variant="ghost"
              size="icon"
              aria-label="Add photo or video"
              onClick={onAttach}
            >
              <IconPhoto aria-hidden="true" />
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              aria-label="Mention someone"
              onClick={() => setContent((value) => `${value}${value.endsWith(" ") ? "" : " "}@`)}
            >
              <IconAt aria-hidden="true" />
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              aria-label="Add emoji"
              onClick={() => setContent((value) => `${value}\u{1F44B}`)}
            >
              <IconMoodSmile aria-hidden="true" />
            </Button>
            {allowContentWarning ? (
              <Button
                type="button"
                variant="ghost"
                size="icon"
                aria-pressed={warningOpen}
                aria-controls={warningId}
                aria-label="Add content warning"
                className={cn(warningOpen && "text-amber-600 dark:text-amber-400")}
                onClick={() => setWarningOpen((open) => !open)}
              >
                <IconAlertTriangle aria-hidden="true" />
              </Button>
            ) : null}
          </div>

<div className="flex items-center gap-2">
            <span
              id={counterId}
              aria-live="polite"
              className={cn(
                "text-xs tabular-nums",
                remaining < 0 ? "text-destructive" : "text-muted-foreground",
              )}
            >
              {remaining}
            </span>

{choices.length > 0 ? (
              <DropdownMenu>
                <DropdownMenuTrigger render={<Button type="button" variant="outline" size="sm" />}>
                  <selected.icon aria-hidden="true" />
                  {selected.label}
                  <IconChevronDown aria-hidden="true" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="max-w-64">
                  {choices.map((option) => (
                    <DropdownMenuItem
                      key={option.value}
                      onClick={() => setVisibility(option.value)}
                    >
                      <option.icon aria-hidden="true" />
                      <span className="flex flex-col">
                        <span>{option.label}</span>
                        <span className="text-xs text-muted-foreground">{option.description}</span>
                      </span>
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            ) : null}

<Button type="submit" size="sm" disabled={!canSubmit}>
              {submitLabel}
            </Button>
          </div>
        </CardFooter>
      </form>
    </Card>
  );
}

export { PostComposer, extractTags, visibilityOptions, type PostComposerProps };
```

## Usage

Produces a complete `Create` activity wrapping a `Note`, ready to `POST` to the author's outbox.

```tsx
import { PostComposer } from "@/components/ui/post-composer";

<PostComposer author={viewer} onSubmit={(activity) => postToOutbox(viewer, activity)} />
```

### Audience

The visibility selector writes real `to` and `cc` addressing rather than a private field:

| Choice          | `to`             | `cc`                        |
| --------------- | ---------------- | --------------------------- |
| Public          | Public           | followers, mentions         |
| Unlisted        | followers        | Public, mentions            |
| Followers       | followers        | mentions                    |
| Mentioned only  | mentions         | —                           |

Restrict or hide the choices:

```tsx
<PostComposer author={viewer} visibilityOptions={["public", "followers"]} />
<PostComposer author={viewer} visibilityOptions={false} defaultVisibility="followers" />
```

### Tags and content warnings

`@user@host` mentions and `#hashtags` are extracted into the object's `tag` array as `Mention` and
`Hashtag` entries, and mentions are added to the audience automatically. The warning toggle sets
`summary` plus `sensitive: true`, which is what renderers use to collapse a post.

### Replies

Pass `inReplyTo` to set the object's `inReplyTo` and switch the placeholder to reply wording:

```tsx
<PostComposer author={viewer} inReplyTo={note} submitLabel="Reply" maxLength={500} />
```

The character counter is grapheme-aware and announces via `aria-live`. `onSubmit` may return a
promise; the submit button stays disabled while it settles, and the content clears on success unless
you set `preserveOnSubmit`.

---

URL: https://ui.uptoolkit.com/components/reaction-bar.md

Like, boost, reply, and share bar that emits ActivityPub activities.

# Reaction Bar

Like, boost, reply, and share bar that emits ActivityPub activities.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/reaction-bar.json
```

[Registry JSON](https://ui.uptoolkit.com/r/reaction-bar.json)

## Preview

```tsx
import * as React from "react";

import { samplePost, sampleViewer } from "@/lib/social-sample-data";
import { ReactionBar } from "@/components/ui/reaction-bar";

export function Preview() {
  const [last, setLast] = React.useState("Hover the like button to pick a reaction.");

return (
    <div className="flex w-full max-w-lg flex-col gap-3 rounded-lg border p-3">
      <ReactionBar
        object={samplePost}
        viewer={sampleViewer}
        showBookmark
        onLike={(activity) => setLast(`${activity.type} ${activity.content ?? ""}`.trim())}
        onUnlike={(activity) => setLast(`${activity.type} ${activity.object.type}`)}
        onShare={(activity) => setLast(activity.type)}
        onUnshare={(activity) => setLast(`${activity.type} ${activity.object.type}`)}
        onReply={() => setLast("Reply requested")}
      />
      <p className="m-0 text-xs text-muted-foreground">{last}</p>
    </div>
  );
}
```

## Source

### ui/reaction-bar.tsx

```tsx
"use client";

import {
  IconBookmark,
  IconBookmarkFilled,
  IconHeart,
  IconHeartFilled,
  IconMessageCircle,
  IconRepeat,
  IconShare3,
} from "@tabler/icons-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

import {
  createAnnounceActivity,
  createLikeActivity,
  createUndoActivity,
  formatCompactNumber,
  getCollectionCount,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubObject,
} from "@/lib/activitypub";

/**
 * Emoji reactions.
 *
 * The fediverse expresses these as `EmojiReact` (or `Like` carrying `content`),
 * so each kind is just an emoji paired with a label.
 */
type ReactionKind = {
  key: string;
  emoji: string;
  label: string;
};

const defaultReactionKinds: readonly ReactionKind[] = [
  { key: "like", emoji: "\u{1F44D}", label: "Like" },
  { key: "love", emoji: "\u2764\uFE0F", label: "Love" },
  { key: "care", emoji: "\u{1F917}", label: "Care" },
  { key: "haha", emoji: "\u{1F602}", label: "Haha" },
  { key: "wow", emoji: "\u{1F62E}", label: "Wow" },
  { key: "sad", emoji: "\u{1F622}", label: "Sad" },
  { key: "angry", emoji: "\u{1F621}", label: "Angry" },
];

type ReactionCounts = {
  likes?: number;
  shares?: number;
  replies?: number;
};

type ReactionViewerState = {
  /** Emoji when the viewer used a specific reaction, `true` for a plain Like. */
  liked?: boolean | string;
  shared?: boolean;
  bookmarked?: boolean;
};

type ReactionActivity = ActivityPubActivity;
type UndoReactionActivity = ActivityPubActivity<ReactionActivity>;

type ReactionBarProps = Omit<React.ComponentProps<"div">, "children"> & {
  object: ActivityPubObject;
  /** The signed-in actor. Without it the bar renders read-only counts. */
  viewer?: ActivityPubActor;
  /** Overrides the counts derived from the object's `likes`/`shares`/`replies`. */
  counts?: ReactionCounts;
  /** Controlled viewer state. Omit to let the bar manage it. */
  state?: ReactionViewerState;
  defaultState?: ReactionViewerState;
  onStateChange?: (state: ReactionViewerState) => void;
  onLike?: (activity: ReactionActivity) => void;
  onUnlike?: (activity: UndoReactionActivity) => void;
  onShare?: (activity: ReactionActivity) => void;
  onUnshare?: (activity: UndoReactionActivity) => void;
  onReply?: (object: ActivityPubObject) => void;
  /** Native share sheet is used when this is omitted. */
  onCopyLink?: (object: ActivityPubObject) => void;
  /** Emoji reaction picker. Pass `false` for a single Like button. */
  reactions?: readonly ReactionKind[] | false;
  showBookmark?: boolean;
  variant?: "default" | "compact";
  /** BCP 47 locale for counts. Must match on server and client. */
  locale?: string;
};

function getReactionKind(
  reactions: readonly ReactionKind[],
  liked: boolean | string | undefined,
): ReactionKind | undefined {
  if (typeof liked !== "string") {
    return undefined;
  }

return reactions.find((reaction) => reaction.emoji === liked || reaction.key === liked);
}

/**
 * Like, boost, reply, and share controls for an ActivityPub object.
 *
 * Every interaction produces a real activity: `Like`/`EmojiReact` for
 * reactions, `Announce` for boosts, and `Undo` wrapping the original activity
 * when the viewer takes it back. Counts update optimistically.
 */
function ReactionBar({
  object,
  viewer,
  counts,
  state: controlledState,
  defaultState,
  onStateChange,
  onLike,
  onUnlike,
  onShare,
  onUnshare,
  onReply,
  onCopyLink,
  reactions = defaultReactionKinds,
  showBookmark = false,
  variant = "default",
  locale,
  className,
  ...props
}: ReactionBarProps) {
  const reactionKinds = reactions === false ? [] : reactions;
  const [uncontrolledState, setUncontrolledState] = React.useState<ReactionViewerState>(
    defaultState ?? {},
  );
  const [pickerOpen, setPickerOpen] = React.useState(false);
  const state = controlledState ?? uncontrolledState;

const baseCounts = React.useMemo<Required<ReactionCounts>>(
    () => ({
      likes: counts?.likes ?? getCollectionCount(object.likes),
      shares: counts?.shares ?? getCollectionCount(object.shares),
      replies: counts?.replies ?? getCollectionCount(object.replies),
    }),
    [counts?.likes, counts?.replies, counts?.shares, object.likes, object.replies, object.shares],
  );

/** The incoming counts describe the object without the viewer's own action. */
  const initialState = React.useRef(defaultState ?? controlledState ?? {});
  const likeDelta = Number(Boolean(state.liked)) - Number(Boolean(initialState.current.liked));
  const shareDelta = Number(Boolean(state.shared)) - Number(Boolean(initialState.current.shared));

const activityRef = React.useRef<{ like?: ReactionActivity; share?: ReactionActivity }>({});

const commitState = React.useCallback(
    (next: ReactionViewerState) => {
      if (controlledState === undefined) {
        setUncontrolledState(next);
      }

onStateChange?.(next);
    },
    [controlledState, onStateChange],
  );

const handleLike = React.useCallback(
    (reaction?: ReactionKind) => {
      setPickerOpen(false);

const alreadyReacted = Boolean(state.liked) && (!reaction || state.liked === reaction.emoji);

if (alreadyReacted) {
        commitState({ ...state, liked: false });

if (viewer && activityRef.current.like) {
          onUnlike?.(createUndoActivity({ actor: viewer, activity: activityRef.current.like }));
        }

activityRef.current.like = undefined;
        return;
      }

commitState({ ...state, liked: reaction?.emoji ?? true });

if (!viewer) {
        return;
      }

const activity = createLikeActivity({
        actor: viewer,
        object,
        ...(reaction ? { content: reaction.emoji } : {}),
      });

activityRef.current.like = activity;
      onLike?.(activity);
    },
    [commitState, object, onLike, onUnlike, state, viewer],
  );

const handleShare = React.useCallback(() => {
    if (state.shared) {
      commitState({ ...state, shared: false });

if (viewer && activityRef.current.share) {
        onUnshare?.(createUndoActivity({ actor: viewer, activity: activityRef.current.share }));
      }

activityRef.current.share = undefined;
      return;
    }

commitState({ ...state, shared: true });

if (!viewer) {
      return;
    }

const activity = createAnnounceActivity({ actor: viewer, object });

activityRef.current.share = activity;
    onShare?.(activity);
  }, [commitState, object, onShare, onUnshare, state, viewer]);

const handleCopyLink = React.useCallback(() => {
    if (onCopyLink) {
      onCopyLink(object);
      return;
    }

const url = object.url ?? object.id;

if (typeof navigator !== "undefined" && "clipboard" in navigator) {
      void navigator.clipboard.writeText(url);
    }
  }, [object, onCopyLink]);

const activeReaction = getReactionKind(reactionKinds, state.liked);
  const likeCount = Math.max(0, baseCounts.likes + likeDelta);
  const shareCount = Math.max(0, baseCounts.shares + shareDelta);
  const compact = variant === "compact";
  const buttonSize = compact ? "sm" : "default";

return (
    <div
      className={cn(
        "flex items-center gap-1",
        compact ? "text-xs" : "justify-between text-sm",
        className,
      )}
      {...props}
    >
      <div className="relative flex items-center">
        {reactionKinds.length > 0 && pickerOpen ? (
          <div
            role="menu"
            aria-label="Choose a reaction"
            className="absolute bottom-full left-0 z-20 mb-1 flex gap-0.5 rounded-full border bg-popover p-1 shadow-md"
            onMouseLeave={() => setPickerOpen(false)}
          >
            {reactionKinds.map((reaction) => (
              <button
                key={reaction.key}
                type="button"
                role="menuitem"
                title={reaction.label}
                aria-label={reaction.label}
                className="rounded-full px-1.5 py-0.5 text-lg transition-transform hover:scale-125 focus-visible:scale-125 focus-visible:outline-none"
                onClick={() => handleLike(reaction)}
              >
                <span aria-hidden="true">{reaction.emoji}</span>
              </button>
            ))}
          </div>
        ) : null}
        <Button
          type="button"
          variant="ghost"
          size={buttonSize}
          aria-pressed={Boolean(state.liked)}
          aria-label={activeReaction ? `${activeReaction.label} reaction` : "Like"}
          className={cn(state.liked && !activeReaction && "text-rose-600 dark:text-rose-400")}
          onClick={() => handleLike(activeReaction)}
          onContextMenu={(event) => {
            if (reactionKinds.length === 0) {
              return;
            }

event.preventDefault();
            setPickerOpen(true);
          }}
          onMouseEnter={() => reactionKinds.length > 0 && setPickerOpen(true)}
        >
          {activeReaction ? (
            <span aria-hidden="true" className="text-base leading-none">
              {activeReaction.emoji}
            </span>
          ) : state.liked ? (
            <IconHeartFilled aria-hidden="true" />
          ) : (
            <IconHeart aria-hidden="true" />
          )}
          {likeCount > 0 ? formatCompactNumber(likeCount, locale) : "Like"}
        </Button>
      </div>

<Button
        type="button"
        variant="ghost"
        size={buttonSize}
        aria-label="Reply"
        onClick={() => onReply?.(object)}
      >
        <IconMessageCircle aria-hidden="true" />
        {baseCounts.replies > 0 ? formatCompactNumber(baseCounts.replies, locale) : "Reply"}
      </Button>

<Button
        type="button"
        variant="ghost"
        size={buttonSize}
        aria-pressed={Boolean(state.shared)}
        aria-label={state.shared ? "Undo boost" : "Boost"}
        className={cn(state.shared && "text-emerald-600 dark:text-emerald-400")}
        onClick={handleShare}
      >
        <IconRepeat aria-hidden="true" />
        {shareCount > 0 ? formatCompactNumber(shareCount, locale) : "Boost"}
      </Button>

<Button
        type="button"
        variant="ghost"
        size={buttonSize}
        aria-label="Copy link to post"
        onClick={handleCopyLink}
      >
        <IconShare3 aria-hidden="true" />
        {compact ? null : "Share"}
      </Button>

{showBookmark ? (
        <Button
          type="button"
          variant="ghost"
          size={buttonSize}
          aria-pressed={Boolean(state.bookmarked)}
          aria-label={state.bookmarked ? "Remove bookmark" : "Bookmark"}
          onClick={() => commitState({ ...state, bookmarked: !state.bookmarked })}
        >
          {state.bookmarked ? (
            <IconBookmarkFilled aria-hidden="true" />
          ) : (
            <IconBookmark aria-hidden="true" />
          )}
        </Button>
      ) : null}
    </div>
  );
}

export {
  ReactionBar,
  defaultReactionKinds,
  type ReactionBarProps,
  type ReactionCounts,
  type ReactionKind,
  type ReactionViewerState,
};
```

## Usage

Like, boost, reply, and share controls for an ActivityPub object. Every interaction produces an
activity you can deliver: `Like` or `EmojiReact` for reactions, `Announce` for boosts, and `Undo`
wrapping the original when the viewer takes it back.

```tsx
import { ReactionBar } from "@/components/ui/reaction-bar";

<ReactionBar
  object={note}
  viewer={viewer}
  onLike={(activity) => postToOutbox(viewer, activity)}
  onUnlike={(activity) => postToOutbox(viewer, activity)}
  onShare={(activity) => postToOutbox(viewer, activity)}
  onReply={(object) => openComposer(object)}
/>
```

### Emoji reactions

Hover or right-click the like button to open the picker. Choosing an emoji emits `EmojiReact` with
the emoji in `content`, which is how the fediverse carries reactions beyond a plain like. Pass your
own set, or `reactions={false}` for a single like button:

```tsx
<ReactionBar object={note} reactions={[{ key: "love", emoji: "❤️", label: "Love" }]} />
<ReactionBar object={note} reactions={false} />
```

### Counts

Counts come from the object's own `likes`, `shares`, and `replies` collections, so a document
fetched straight from an outbox needs no extra props. Override with `counts` when you track them
separately. The bar assumes the incoming counts exclude the viewer's own action and adds a delta on
top, so numbers stay correct when a viewer likes and then unlikes.

Pass `variant="compact"` for a denser bar and `showBookmark` to add a local bookmark toggle.

---

URL: https://ui.uptoolkit.com/blocks.md

Composed templates and larger UI sections.

# Blocks

Composed templates and larger UI sections.

- [Actor Grid](https://ui.uptoolkit.com/blocks/actor-grid): Filterable people grid with Schema.org ItemList markup.
- [Notifications Panel](https://ui.uptoolkit.com/blocks/notifications-panel): Grouped inbox panel for ActivityPub Like, Announce, Follow, and reply activities.
- [Profile Header](https://ui.uptoolkit.com/blocks/profile-header): Cover, identity, stats, and tabs header with Schema.org ProfilePage markup.
- [Social Feed](https://ui.uptoolkit.com/blocks/social-feed): Timeline block that renders an ActivityPub OrderedCollection with a composer.
- [Stats Panel](https://ui.uptoolkit.com/blocks/stats-panel): A simple multi-file block with a component and local data helper.
- [Wall Feed](https://ui.uptoolkit.com/blocks/wall-feed): Activity feed for a profile wall: posts, boosts, reactions, follows, and photo albums in one grouped stream.

---

URL: https://ui.uptoolkit.com/blocks/actor-grid.md

Filterable people grid with Schema.org ItemList markup.

# Actor Grid

Filterable people grid with Schema.org ItemList markup.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/actor-grid.json
```

[Registry JSON](https://ui.uptoolkit.com/r/actor-grid.json)

## Preview

```tsx
import { sampleSuggestions } from "@/lib/social-sample-data";
import { ActorGrid } from "@/components/actor-grid";

export function Preview() {
  return (
    <div className="flex w-full flex-col gap-8">
      <ActorGrid
        heading="Followers"
        description="Everyone following this actor across the fediverse."
        columns={2}
        searchable
      />
      <ActorGrid
        actors={sampleSuggestions}
        heading="People you may know"
        variant="row"
        columns={1}
        includeJsonLd={false}
      />
    </div>
  );
}
```

## Source

### components/actor-grid.tsx

```tsx
"use client";

import { IconSearch, IconUsersGroup } from "@tabler/icons-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

import { ActorCard } from "@/components/ui/actor-card";
import type { FollowState } from "@/components/ui/follow-button";
import { JsonLd } from "@/components/json-ld";
import {
  formatCompactNumber,
  getActorDisplayName,
  getActorHandle,
  getCollectionCount,
  getCollectionItems,
  toPlainText,
  type ActivityPubActor,
  type ActivityPubCollection,
} from "@/lib/activitypub";
import { toActorListJsonLd } from "@/lib/schema-org";
import { sampleFollowers } from "@/lib/social-sample-data";

const columnClasses: Record<number, string> = {
  1: "grid-cols-1",
  2: "grid-cols-1 sm:grid-cols-2",
  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
};

type ActorGridProps = Omit<React.ComponentProps<"section">, "children"> & {
  /** A `followers`, `following`, or suggestions collection. */
  actors?: ActivityPubCollection<ActivityPubActor> | readonly ActivityPubActor[];
  heading?: string;
  description?: string;
  /** Follow state per actor id, so the grid can show mixed relationships. */
  followStates?: Readonly<Record<string, FollowState>>;
  onFollowStateChange?: (actor: ActivityPubActor, state: FollowState) => void;
  onMessage?: (actor: ActivityPubActor) => void;
  /** Card layout: `card` stacks, `row` renders compact list rows. */
  variant?: "card" | "row";
  columns?: 1 | 2 | 3 | 4;
  /** Show the client-side name and handle filter. */
  searchable?: boolean;
  /** Actors shown before the "show all" control. */
  initialCount?: number;
  emptyState?: React.ReactNode;
  /** Emits a Schema.org `ItemList` of `Person` nodes. */
  includeJsonLd?: boolean;
  /** BCP 47 locale for dates and counts. Must match on server and client. */
  locale?: string;
};

/**
 * People grid for an ActivityPub actor collection.
 *
 * Works for followers, following, and suggestion lists. The total comes from the
 * collection's `totalItems` when present, so a paginated collection still
 * reports its real size, and the list is described as a Schema.org `ItemList`.
 */
function ActorGrid({
  actors = sampleFollowers,
  heading = "Followers",
  description,
  followStates,
  onFollowStateChange,
  onMessage,
  variant = "card",
  columns = 3,
  searchable = false,
  initialCount,
  emptyState,
  includeJsonLd = true,
  locale,
  className,
  ...props
}: ActorGridProps) {
  const [query, setQuery] = React.useState("");
  const [expanded, setExpanded] = React.useState(false);
  const searchId = React.useId();

const items = React.useMemo(() => getCollectionItems(actors), [actors]);
  const total = getCollectionCount(actors);

const filtered = React.useMemo(() => {
    const needle = query.trim().toLowerCase();

if (!needle) {
      return items;
    }

return items.filter((actor) =>
      [getActorDisplayName(actor), getActorHandle(actor), toPlainText(actor.summary)]
        .join(" ")
        .toLowerCase()
        .includes(needle),
    );
  }, [items, query]);

const limit = initialCount ?? filtered.length;
  const visible = expanded ? filtered : filtered.slice(0, limit);
  const hidden = filtered.length - visible.length;

return (
    <section
      aria-label={heading}
      className={cn("flex w-full flex-col gap-3", className)}
      {...props}
    >
      {includeJsonLd ? <JsonLd data={toActorListJsonLd(items, { name: heading })} /> : null}

<div className="flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-1">
          <h2 className="m-0 flex items-center gap-2 text-lg font-semibold">
            <IconUsersGroup aria-hidden="true" className="size-5" />
            {heading}
            {total > 0 ? (
              <span className="text-sm font-normal text-muted-foreground tabular-nums">
                {formatCompactNumber(total, locale)}
              </span>
            ) : null}
          </h2>
          {description ? <p className="m-0 text-sm text-muted-foreground">{description}</p> : null}
        </div>

{searchable ? (
          <div className="flex items-center gap-2">
            <label className="sr-only" htmlFor={searchId}>
              Filter {heading}
            </label>
            <div className="relative">
              <IconSearch
                aria-hidden="true"
                className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
              />
              <Input
                id={searchId}
                type="search"
                value={query}
                placeholder="Search people"
                className="w-48 pl-8"
                onChange={(event) => setQuery(event.target.value)}
              />
            </div>
          </div>
        ) : null}
      </div>

{visible.length === 0 ? (
        <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
          {emptyState ?? (query ? `No people match "${query}".` : "No people to show yet.")}
        </div>
      ) : (
        <ul
          className={cn(
            "m-0 grid list-none gap-3 p-0",
            variant === "row" ? "grid-cols-1" : (columnClasses[columns] ?? columnClasses[3]),
          )}
        >
          {visible.map((actor) => (
            <li key={actor.id}>
              <ActorCard
                actor={actor}
                variant={variant}
                showFields={variant === "card"}
                includeJsonLd={false}
                locale={locale}
                followState={followStates?.[actor.id]}
                onFollowStateChange={(state) => onFollowStateChange?.(actor, state)}
                {...(onMessage ? { onMessage } : {})}
              />
            </li>
          ))}
        </ul>
      )}

{hidden > 0 ? (
        <Button
          type="button"
          variant="outline"
          className="self-center"
          onClick={() => setExpanded(true)}
        >
          Show all {filtered.length} people
        </Button>
      ) : null}
    </section>
  );
}

export { ActorGrid, type ActorGridProps };
```

## Usage

One block for every people list: followers, following, mutuals, suggestions, and search results.

```tsx
import { ActorGrid } from "@/components/actor-grid";

const followers = await fetchFollowers(actor);

<ActorGrid
  actors={followers}
  heading="Followers"
  columns={3}
  searchable
  onFollowStateChange={(actor, state) => trackRelationship(actor, state)}
/>
```

Accepts a `Collection` or a plain array. When a collection carries `totalItems`, that is the count
shown in the heading, so a paginated followers list reports its real size instead of the page length.

### Layout

`variant="card"` uses the stacked card with profile fields; `variant="row"` renders compact rows and
ignores `columns`, which is the shape for a sidebar.

```tsx
<ActorGrid actors={suggestions} heading="People you may know" variant="row" columns={1} />
```

### Filtering

`searchable` adds a client-side filter over display name, handle, and bio. `initialCount` limits the
first render and adds a "show all" control:

```tsx
<ActorGrid actors={followers} initialCount={6} searchable />
```

The empty state distinguishes "no results for this query" from "nothing here yet"; override it with
`emptyState`.

### Relationships

Pass `followStates` keyed by actor id to show mixed relationships in one list:

```tsx
<ActorGrid actors={people} followStates={{ [actor.id]: "following" }} />
```

### Structured data

Emits one Schema.org `ItemList` of `Person` nodes for the whole list, and the cards inside skip
their own JSON-LD so the graph stays clean. Set `includeJsonLd={false}` when the page emits the list
itself.

---

URL: https://ui.uptoolkit.com/blocks/notifications-panel.md

Grouped inbox panel for ActivityPub Like, Announce, Follow, and reply activities.

# Notifications Panel

Grouped inbox panel for ActivityPub Like, Announce, Follow, and reply activities.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/notifications-panel.json
```

[Registry JSON](https://ui.uptoolkit.com/r/notifications-panel.json)

## Preview

```tsx
import { sampleViewer } from "@/lib/social-sample-data";
import { NotificationsPanel } from "@/components/notifications-panel";

export function Preview() {
  return <NotificationsPanel viewer={sampleViewer} />;
}
```

## Source

### components/notifications-panel.tsx

```tsx
"use client";

import {
  IconAt,
  IconBell,
  IconHeartFilled,
  IconMessageCircle,
  IconRepeat,
  IconUserPlus,
} from "@tabler/icons-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

import { ActorAvatar } from "@/components/ui/actor-avatar";
import {
  formatPublishedTime,
  getActorDisplayName,
  getCollectionItems,
  getObjectId,
  resolveActor,
  resolveObject,
  toPlainText,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
} from "@/lib/activitypub";
import { SAMPLE_NOW, sampleInbox } from "@/lib/social-sample-data";

type InboxActivity = ActivityPubActivity;

/** Notification categories, mapped from ActivityStreams activity types. */
type NotificationKind = "reaction" | "boost" | "follow" | "mention" | "reply";

const kindConfig: Record<
  NotificationKind,
  { label: string; icon: typeof IconBell; tone: string; verb: string }
> = {
  reaction: {
    label: "Reactions",
    icon: IconHeartFilled,
    tone: "text-rose-600 dark:text-rose-400",
    verb: "reacted to your post",
  },
  boost: {
    label: "Boosts",
    icon: IconRepeat,
    tone: "text-emerald-600 dark:text-emerald-400",
    verb: "boosted your post",
  },
  follow: {
    label: "Follows",
    icon: IconUserPlus,
    tone: "text-sky-600 dark:text-sky-400",
    verb: "followed you",
  },
  mention: {
    label: "Mentions",
    icon: IconAt,
    tone: "text-violet-600 dark:text-violet-400",
    verb: "mentioned you",
  },
  reply: {
    label: "Replies",
    icon: IconMessageCircle,
    tone: "text-muted-foreground",
    verb: "replied to your post",
  },
};

/**
 * Classifies an inbox activity.
 *
 * `Create` splits into `reply` or `mention` depending on whether the object
 * carries `inReplyTo`, which is how clients separate the two in practice.
 */
function isNotificationKind(value: unknown): value is NotificationKind {
  return typeof value === "string" && Object.hasOwn(kindConfig, value);
}

function getNotificationKind(activity: InboxActivity): NotificationKind | undefined {
  switch (activity.type) {
    case "Like":
    case "EmojiReact":
      return "reaction";
    case "Announce":
      return "boost";
    case "Follow":
      return "follow";
    case "Create":
      return resolveObject(activity.object)?.inReplyTo ? "reply" : "mention";
    default:
      return undefined;
  }
}

/** Short excerpt of the object the activity refers to. */
function getNotificationExcerpt(activity: InboxActivity): string | undefined {
  const object = resolveObject(activity.object);
  const text = toPlainText(object?.content) || object?.name;

if (!text) {
    return undefined;
  }

return text.length > 120 ? `${text.slice(0, 119)}…` : text;
}

type NotificationsPanelProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
  /** An `inbox` page of activities addressed to the viewer. */
  collection?: ActivityPubCollection<InboxActivity> | readonly InboxActivity[];
  /** The signed-in actor, used to label follow-back actions. */
  viewer?: ActivityPubActor;
  heading?: string;
  /** Activity ids the viewer has not seen yet. */
  unreadIds?: readonly string[];
  /** Hide the category filter row. */
  hideFilters?: boolean;
  maxHeight?: number | string;
  onSelect?: (activity: InboxActivity) => void;
  onMarkAllRead?: () => void;
  /** Fixed "now" for relative timestamps. */
  now?: Date | number;
  /** BCP 47 locale for dates. Must match on server and client. */
  locale?: string;
};

/**
 * Notification panel for an ActivityPub inbox.
 *
 * Reads `Like`, `EmojiReact`, `Announce`, `Follow`, and `Create` activities and
 * groups them into the categories a social client shows, keeping the emoji from
 * an `EmojiReact` so the reaction is visible in the row.
 */
function NotificationsPanel({
  collection = sampleInbox,
  viewer,
  heading = "Notifications",
  unreadIds,
  hideFilters = false,
  maxHeight = 420,
  onSelect,
  onMarkAllRead,
  now = SAMPLE_NOW,
  locale,
  className,
  ...props
}: NotificationsPanelProps) {
  const [filter, setFilter] = React.useState<NotificationKind | "all">("all");
  const [readIds, setReadIds] = React.useState<readonly string[]>([]);

const entries = React.useMemo(
    () =>
      getCollectionItems(collection).flatMap((activity) => {
        const kind = getNotificationKind(activity);
        const actor = resolveActor(activity.actor);

return kind && actor ? [{ activity, kind, actor }] : [];
      }),
    [collection],
  );

const availableKinds = React.useMemo(
    () => [...new Set(entries.map((entry) => entry.kind))],
    [entries],
  );
  const visible = filter === "all" ? entries : entries.filter((entry) => entry.kind === filter);
  const unread = new Set(unreadIds ?? entries.slice(0, 3).map((entry) => entry.activity.id));
  const unreadCount = entries.filter(
    (entry) => unread.has(entry.activity.id) && !readIds.includes(entry.activity.id),
  ).length;

const handleMarkAllRead = () => {
    setReadIds(entries.map((entry) => entry.activity.id));
    onMarkAllRead?.();
  };

return (
    <Card className={cn("w-full max-w-md gap-3 py-4", className)} {...props}>
      <CardHeader className="gap-3">
        <div className="flex items-center justify-between gap-2">
          <CardTitle className="flex items-center gap-2">
            <IconBell aria-hidden="true" className="size-4" />
            {heading}
            {unreadCount > 0 ? <Badge>{unreadCount}</Badge> : null}
          </CardTitle>
          {unreadCount > 0 ? (
            <Button type="button" variant="ghost" size="sm" onClick={handleMarkAllRead}>
              Mark all read
            </Button>
          ) : null}
        </div>

{hideFilters || availableKinds.length < 2 ? null : (
          <Tabs
            value={filter}
            onValueChange={(value: unknown) => setFilter(isNotificationKind(value) ? value : "all")}
          >
            <TabsList
              variant="line"
              className="flex-wrap justify-start group-data-horizontal/tabs:h-auto"
            >
              <TabsTrigger value="all">All</TabsTrigger>
              {availableKinds.map((kind) => (
                <TabsTrigger key={kind} value={kind}>
                  {kindConfig[kind].label}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        )}
      </CardHeader>

<CardContent className="px-0">
        <ScrollArea style={{ maxHeight }} className="px-4">
          {visible.length === 0 ? (
            <p className="m-0 py-8 text-center text-sm text-muted-foreground">Nothing here yet.</p>
          ) : (
            <ul className="m-0 flex list-none flex-col p-0">
              {visible.map(({ activity, kind, actor }) => {
                const config = kindConfig[kind];
                const Icon = config.icon;
                const isUnread = unread.has(activity.id) && !readIds.includes(activity.id);
                const excerpt = getNotificationExcerpt(activity);
                const targetId = getObjectId(activity.object);

return (
                  <li key={activity.id}>
                    <button
                      type="button"
                      className={cn(
                        "flex w-full items-start gap-3 rounded-md p-2 text-left transition-colors hover:bg-accent",
                        isUnread && "bg-accent/40",
                      )}
                      onClick={() => {
                        setReadIds((current) => [...current, activity.id]);
                        onSelect?.(activity);
                      }}
                    >
                      <span className="relative shrink-0">
                        <ActorAvatar actor={actor} />
                        <span
                          className={cn(
                            "absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full bg-background ring-1 ring-border",
                            config.tone,
                          )}
                        >
                          {activity.type === "EmojiReact" && activity.content ? (
                            <span aria-hidden="true" className="text-[10px] leading-none">
                              {activity.content}
                            </span>
                          ) : (
                            <Icon aria-hidden="true" className="size-2.5" />
                          )}
                        </span>
                      </span>

<span className="flex min-w-0 flex-1 flex-col gap-0.5">
                        <span className="text-sm">
                          <span className="font-semibold">{getActorDisplayName(actor)}</span>{" "}
                          <span className="text-muted-foreground">{config.verb}</span>
                        </span>
                        {excerpt ? (
                          <span className="line-clamp-2 text-xs text-muted-foreground">
                            {excerpt}
                          </span>
                        ) : null}
                        <span className="flex items-center gap-2 text-xs text-muted-foreground">
                          {activity.published ? (
                            <time dateTime={activity.published}>
                              {formatPublishedTime(activity.published, {
                                now,
                                ...(locale === undefined ? {} : { locale }),
                              })}
                            </time>
                          ) : null}
                          {kind === "follow" && viewer && targetId === viewer.id ? (
                            <span className="text-primary">Follow back</span>
                          ) : null}
                        </span>
                      </span>

{isUnread ? (
                        <span
                          aria-label="Unread"
                          role="img"
                          className="mt-2 size-2 shrink-0 rounded-full bg-primary"
                        />
                      ) : null}
                    </button>
                  </li>
                );
              })}
            </ul>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

export {
  NotificationsPanel,
  getNotificationKind,
  type InboxActivity,
  type NotificationKind,
  type NotificationsPanelProps,
};
```

## Usage

Turns a raw ActivityPub `inbox` page into the notification list a social client shows.

```tsx
import { NotificationsPanel } from "@/components/notifications-panel";

const inbox = await fetchNotifications(viewer);

<NotificationsPanel
  collection={inbox}
  viewer={viewer}
  unreadIds={unreadIds}
  onSelect={(activity) => navigate(getObjectId(activity.object))}
  onMarkAllRead={() => markAllRead()}
/>
```

### Categories

| Activity                | Category   |
| ----------------------- | ---------- |
| `Like`, `EmojiReact`    | Reactions  |
| `Announce`              | Boosts     |
| `Follow`                | Follows    |
| `Create` with `inReplyTo` | Replies  |
| `Create` without `inReplyTo` | Mentions |

`getNotificationKind` is exported if you need the same classification elsewhere. Activity types
outside the table are skipped, so an unexpected `Add` or `Flag` in the inbox will not render a blank
row. The filter strip only lists categories actually present.

An `EmojiReact` shows its emoji in the badge instead of a generic heart, so the reaction is visible
without opening the post.

### Unread state

Pass `unreadIds` to control which rows are unread; without it the newest three are marked unread as a
demo. Selecting a row marks it read locally and calls `onSelect`.

Pass `maxHeight` to bound the scroll area, or `hideFilters` for a compact rail. Without a
`collection` the panel renders [`social-sample-data`](/utilities/social-sample-data).

---

URL: https://ui.uptoolkit.com/blocks/profile-header.md

Cover, identity, stats, and tabs header with Schema.org ProfilePage markup.

# Profile Header

Cover, identity, stats, and tabs header with Schema.org ProfilePage markup.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/profile-header.json
```

[Registry JSON](https://ui.uptoolkit.com/r/profile-header.json)

## Preview

```tsx
import { sampleViewer } from "@/lib/social-sample-data";
import { ProfileHeader } from "@/components/profile-header";

export function Preview() {
  return <ProfileHeader viewer={sampleViewer} className="max-w-3xl" />;
}
```

## Source

### components/profile-header.tsx

```tsx
"use client";

import { IconCalendar, IconLink, IconMail, IconMapPin } from "@tabler/icons-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

import { ActorAvatar } from "@/components/ui/actor-avatar";
import { FollowButton, type FollowButtonProps } from "@/components/ui/follow-button";
import { JsonLd } from "@/components/json-ld";
import {
  formatCompactNumber,
  formatPublishedDate,
  getActorDisplayName,
  getActorHandle,
  toPlainText,
  type ActivityPubActor,
} from "@/lib/activitypub";
import { toProfilePageJsonLd, type SocialInteractionCounts } from "@/lib/schema-org";
import { sampleAuthor, sampleCounts } from "@/lib/social-sample-data";

/** Field names that get a matching icon instead of a plain label. */
const fieldIcons: Record<string, typeof IconLink> = {
  location: IconMapPin,
  website: IconLink,
  email: IconMail,
};

type ProfileTab = {
  value: string;
  label: string;
  /** Optional count rendered as a badge next to the label. */
  count?: number;
  content?: React.ReactNode;
};

type ProfileHeaderProps = Omit<React.ComponentProps<"header">, "children"> & {
  actor?: ActivityPubActor;
  /** The signed-in actor. Omit for a signed-out view. */
  viewer?: ActivityPubActor;
  counts?: SocialInteractionCounts;
  followState?: FollowButtonProps["state"];
  defaultFollowState?: FollowButtonProps["defaultState"];
  onFollow?: FollowButtonProps["onFollow"];
  onUnfollow?: FollowButtonProps["onUnfollow"];
  onMessage?: (actor: ActivityPubActor) => void;
  /** Tabs rendered under the header. Pass `[]` to render the header alone. */
  tabs?: readonly ProfileTab[];
  defaultTab?: string;
  /** Emits a Schema.org `ProfilePage` JSON-LD script. */
  includeJsonLd?: boolean;
  /** BCP 47 locale for dates and counts. Must match on server and client. */
  locale?: string;
};

const defaultTabs: readonly ProfileTab[] = [
  { value: "posts", label: "Posts" },
  { value: "replies", label: "Replies" },
  { value: "media", label: "Media" },
  { value: "about", label: "About" },
];

/**
 * Profile header for an ActivityPub actor.
 *
 * Cover art comes from the actor's `image`, the avatar from `icon`, and the
 * metadata rows from `attachment` PropertyValue fields, including Mastodon's
 * `verifiedAt` link verification. The whole block is described by a Schema.org
 * `ProfilePage` whose `mainEntity` is the actor.
 */
function ProfileHeader({
  actor = sampleAuthor,
  viewer,
  counts = sampleCounts.author,
  followState,
  defaultFollowState,
  onFollow,
  onUnfollow,
  onMessage,
  tabs = defaultTabs,
  defaultTab,
  includeJsonLd = true,
  locale,
  className,
  ...props
}: ProfileHeaderProps) {
  const displayName = getActorDisplayName(actor);
  const bio = toPlainText(actor.summary);
  const joined = formatPublishedDate(actor.published, locale === undefined ? {} : { locale });
  const fields = actor.attachment ?? [];
  const verified = fields.some((field) => Boolean(field.verifiedAt));
  const isSelf = viewer?.id === actor.id;

const aboutPanel = (
    <dl className="m-0 grid gap-2 text-sm sm:grid-cols-2">
      {fields.map((field) => {
        const Icon = fieldIcons[field.name.toLowerCase()];

return (
          <div key={field.name} className="flex flex-col gap-0.5 rounded-md border p-3">
            <dt className="flex items-center gap-1.5 text-xs text-muted-foreground">
              {Icon ? <Icon aria-hidden="true" className="size-3.5" /> : null}
              {field.name}
            </dt>
            <dd
              className={cn(
                "m-0 font-medium",
                field.verifiedAt && "text-emerald-600 dark:text-emerald-400",
              )}
            >
              {toPlainText(field.value)}
              {field.verifiedAt ? <span className="sr-only"> (verified)</span> : null}
            </dd>
          </div>
        );
      })}
    </dl>
  );

return (
    <header
      className={cn("w-full overflow-hidden rounded-xl border bg-card", className)}
      itemScope
      itemType="https://schema.org/ProfilePage"
      {...props}
    >
      {includeJsonLd ? <JsonLd data={toProfilePageJsonLd(actor, { counts })} /> : null}

{actor.image?.url ? (
        <img
          src={actor.image.url}
          alt={actor.image.name ?? ""}
          className="h-32 w-full object-cover sm:h-48"
        />
      ) : (
        <div className="h-32 w-full bg-gradient-to-br from-muted to-accent sm:h-48" />
      )}

<div className="flex flex-wrap items-end justify-between gap-3">
          <div className="-mt-14 flex items-end gap-3 sm:-mt-20">
            <ActorAvatar
              actor={actor}
              size="lg"
              verified={verified}
              className="size-20 ring-4 ring-card sm:size-28"
            />
            <div className="flex flex-col pb-1">
              <h1 className="m-0 text-xl font-semibold sm:text-2xl" itemProp="name">
                {displayName}
              </h1>
              <span className="text-sm text-muted-foreground" itemProp="alternateName">
                {getActorHandle(actor)}
              </span>
            </div>
          </div>

<div className="flex flex-wrap items-center gap-2">
            {actor.manuallyApprovesFollowers ? <Badge variant="secondary">Approves</Badge> : null}
            {isSelf ? (
              <Button type="button" variant="outline" size="sm">
                Edit profile
              </Button>
            ) : (
              <>
                <FollowButton
                  actor={actor}
                  viewer={viewer}
                  state={followState}
                  defaultState={defaultFollowState}
                  onFollow={onFollow}
                  onUnfollow={onUnfollow}
                />
                {onMessage ? (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => onMessage(actor)}
                    aria-label={`Message ${displayName}`}
                  >
                    <IconMail aria-hidden="true" />
                    Message
                  </Button>
                ) : null}
              </>
            )}
          </div>
        </div>

{bio ? (
          <p className="m-0 max-w-prose text-sm" itemProp="description">
            {bio}
          </p>
        ) : null}

<div className="flex flex-wrap items-center gap-x-6 gap-y-2">
          <dl className="m-0 flex flex-wrap gap-x-6 gap-y-1">
            {counts.posts === undefined ? null : (
              <ProfileStat label="Posts" value={counts.posts} locale={locale} />
            )}
            {counts.followers === undefined ? null : (
              <ProfileStat label="Followers" value={counts.followers} locale={locale} />
            )}
            {counts.following === undefined ? null : (
              <ProfileStat label="Following" value={counts.following} locale={locale} />
            )}
          </dl>

{joined ? (
            <p className="m-0 flex items-center gap-1.5 text-sm text-muted-foreground">
              <IconCalendar aria-hidden="true" className="size-4" />
              Joined {joined}
              {actor.published ? <meta itemProp="foundingDate" content={actor.published} /> : null}
            </p>
          ) : null}
        </div>
      </div>

{tabs.length > 0 ? (
        <>
          <Separator />
          <Tabs defaultValue={defaultTab ?? tabs[0].value} className="gap-0">
            <TabsList variant="line" className="w-full justify-start rounded-none px-4 sm:px-6">
              {tabs.map((tab) => (
                <TabsTrigger key={tab.value} value={tab.value}>
                  {tab.label}
                  {tab.count === undefined ? null : (
                    <Badge variant="secondary">{formatCompactNumber(tab.count, locale)}</Badge>
                  )}
                </TabsTrigger>
              ))}
            </TabsList>
            {tabs.map((tab) => (
              <TabsContent key={tab.value} value={tab.value} className="p-4 sm:p-6">
                {tab.content ?? (tab.value === "about" ? aboutPanel : null)}
              </TabsContent>
            ))}
          </Tabs>
        </>
      ) : null}
    </header>
  );
}

export { ProfileHeader, defaultTabs, type ProfileHeaderProps, type ProfileTab };
```

## Usage

The top of a profile page: cover art, avatar, identity, bio, counts, follow and message actions, and
a tab strip.

```tsx
import { ProfileHeader } from "@/components/profile-header";

<ProfileHeader
  actor={actor}
  viewer={viewer}
  counts={{ posts: 1204, followers: 18940, following: 342 }}
  onFollow={(activity) => postToOutbox(viewer, activity)}
/>
```

Everything is read from the actor document: cover from `image`, avatar from `icon`, bio from
`summary`, join date from `published`, and the About panel from `attachment` PropertyValue fields
including `verifiedAt` link verification. Actors with no `image` get a gradient rather than a gap.

### Tabs

Tabs are data. Pass counts for badges and `content` to render a panel; the `about` tab falls back to
the actor's profile fields when you leave its content empty.

```tsx
<ProfileHeader
  actor={actor}
  tabs={[
    { value: "posts", label: "Posts", count: 1204, content: <Timeline actor={actor} /> },
    { value: "followers", label: "Followers", count: 18940, content: <Followers actor={actor} /> },
    { value: "about", label: "About" },
  ]}
/>
```

Pass `tabs={[]}` to render the header alone, which is what you want when the page owns its own
navigation.

### Viewer state

When `viewer.id` matches the actor, the follow and message actions are replaced with "Edit profile".
Actors with `manuallyApprovesFollowers` show an "Approves" badge, so a follow request is not a
surprise.

### Structured data

Emits a Schema.org `ProfilePage` whose `mainEntity` is the actor, plus matching microdata inline. Set
`includeJsonLd={false}` when the page already emits its own `ProfilePage` node — as
[`social-profile-page`](/pages/social-profile-page) does — to avoid duplicates.

---

URL: https://ui.uptoolkit.com/blocks/social-feed.md

Timeline block that renders an ActivityPub OrderedCollection with a composer.

# Social Feed

Timeline block that renders an ActivityPub OrderedCollection with a composer.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/social-feed.json
```

[Registry JSON](https://ui.uptoolkit.com/r/social-feed.json)

## Preview

```tsx
import { SocialFeed } from "@/components/social-feed";

export function Preview() {
  return <SocialFeed showComments />;
}
```

## Source

### components/social-feed.tsx

```tsx
"use client";

import { IconRefresh } from "@tabler/icons-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

import { CommentThread } from "@/components/ui/comment-thread";
import { JsonLd } from "@/components/json-ld";
import { PostCard } from "@/components/ui/post-card";
import { PostComposer } from "@/components/ui/post-composer";
import {
  getActivityObject,
  getCollectionItems,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
  type ActivityPubObject,
} from "@/lib/activitypub";
import { toFeedJsonLd } from "@/lib/schema-org";
import {
  SAMPLE_NOW,
  sampleFeed,
  sampleViewer,
} from "@/lib/social-sample-data";

type FeedActivity = ActivityPubActivity<ActivityPubObject>;

type SocialFeedProps = Omit<React.ComponentProps<"section">, "children"> & {
  /** The signed-in actor. Drives the composer and interaction handlers. */
  viewer?: ActivityPubActor;
  /** An `OrderedCollection` page from an inbox or outbox. */
  collection?: ActivityPubCollection<FeedActivity> | readonly FeedActivity[];
  heading?: string;
  /** Hide the composer, for example on a read-only public timeline. */
  hideComposer?: boolean;
  /** Show an inline comment thread under each post. */
  showComments?: boolean;
  /** Called with the `Create` activity from the composer. */
  onPublish?: (activity: FeedActivity) => void | Promise<void>;
  /** Called with the collection's `next` page URL. */
  onLoadMore?: (next: string) => void | Promise<void>;
  /** Any activity emitted by a post: Like, EmojiReact, Announce, or Undo. */
  onActivity?: (activity: ActivityPubActivity<unknown>) => void;
  /** Fixed "now" for relative timestamps. */
  now?: Date | number;
  /** BCP 47 locale for dates and counts. Must match on server and client. */
  locale?: string;
};

/**
 * Timeline block for an ActivityPub collection.
 *
 * Accepts an `OrderedCollection` of `Create` and `Announce` activities and
 * renders each wrapped object, so boosts keep their attribution. Newly composed
 * posts are prepended optimistically, and the whole timeline is described by a
 * Schema.org `CollectionPage` JSON-LD node.
 */
function SocialFeed({
  viewer = sampleViewer,
  collection = sampleFeed,
  heading = "Home",
  hideComposer = false,
  showComments = false,
  onPublish,
  onLoadMore,
  onActivity,
  now = SAMPLE_NOW,
  locale,
  className,
  ...props
}: SocialFeedProps) {
  /** Posts composed in this session, kept until the caller refetches. */
  const [published, setPublished] = React.useState<FeedActivity[]>([]);
  const [loadingMore, setLoadingMore] = React.useState(false);

const activities = React.useMemo(
    () => [...published, ...getCollectionItems(collection)],
    [collection, published],
  );
  const next = collection && "type" in collection ? collection.next : undefined;

const objects = React.useMemo(
    () =>
      activities.flatMap((activity) => {
        const object = getActivityObject(activity);

return object ? [{ activity, object }] : [];
      }),
    [activities],
  );

const handlePublish = React.useCallback(
    async (activity: FeedActivity) => {
      setPublished((current) => [activity, ...current]);
      await onPublish?.(activity);
    },
    [onPublish],
  );

const handleLoadMore = React.useCallback(async () => {
    if (!next || loadingMore) {
      return;
    }

setLoadingMore(true);

try {
      await onLoadMore?.(next);
    } finally {
      setLoadingMore(false);
    }
  }, [loadingMore, next, onLoadMore]);

return (
    <section
      aria-label={heading}
      className={cn("flex w-full max-w-xl flex-col gap-4", className)}
      {...props}
    >
      <JsonLd
        data={toFeedJsonLd(
          objects.map((entry) => entry.object),
          {
            name: heading,
            ...(collection && "type" in collection && collection.id ? { url: collection.id } : {}),
          },
        )}
      />

{hideComposer ? null : (
        <PostComposer author={viewer} onSubmit={(activity) => handlePublish(activity)} />
      )}

<ol className="m-0 flex list-none flex-col gap-4 p-0">
        {objects.map(({ activity, object }) => (
          <li key={activity.id}>
            <PostCard
              object={object}
              activity={activity}
              viewer={viewer}
              now={now}
              locale={locale}
              onLike={onActivity}
              onUnlike={onActivity}
              onShare={onActivity}
              onUnshare={onActivity}
            >
              {showComments ? (
                <>
                  <Separator />
                  <CommentThread
                    object={object}
                    viewer={viewer}
                    now={now}
                    locale={locale}
                    initialCount={2}
                  />
                </>
              ) : null}
            </PostCard>
          </li>
        ))}
      </ol>

{next ? (
        <Button
          type="button"
          variant="outline"
          className="self-center"
          disabled={loadingMore}
          onClick={() => void handleLoadMore()}
        >
          <IconRefresh aria-hidden="true" />
          {loadingMore ? "Loading..." : "Load older posts"}
        </Button>
      ) : null}
    </section>
  );
}

export { SocialFeed, type FeedActivity, type SocialFeedProps };
```

## Usage

The timeline. Hand it an `OrderedCollection` page from an `inbox` or `outbox` and it renders each
activity's object, keeping boost attribution intact.

```tsx
import { SocialFeed } from "@/components/social-feed";

const collection = await fetchInbox(viewer);

<SocialFeed
  viewer={viewer}
  collection={collection}
  showComments
  onPublish={(activity) => postToOutbox(viewer, activity)}
  onLoadMore={(next) => fetchPage(next)}
/>
```

`Create` and `Announce` activities both render; anything without a resolvable object is skipped
rather than rendered as an empty card.

### Publishing

Posts composed in the feed are prepended immediately and kept until you refetch, so the timeline does
not appear to swallow a new post while the request is in flight. `onPublish` receives the same
`Create` activity the composer built.

### Pagination

When the collection has a `next` URL, a "Load older posts" button appears and passes that URL to
`onLoadMore`. Merge the page into your collection state and pass it back down.

### Interactions

`onActivity` receives every activity any post emits — `Like`, `EmojiReact`, `Announce`, and the
`Undo` for each — so a single handler can deliver them all:

```tsx
<SocialFeed viewer={viewer} onActivity={(activity) => postToOutbox(viewer, activity)} />
```

### Structured data

The block emits one Schema.org `CollectionPage` wrapping an `ItemList` of postings, so the timeline
is described once rather than per card.

Without a `collection` the block renders
[`social-sample-data`](/utilities/social-sample-data) so it works the moment it is installed. Pass
`hideComposer` for a public timeline and a fixed `now` when rendering on the server.

---

URL: https://ui.uptoolkit.com/blocks/stats-panel.md

A simple multi-file block with a component and local data helper.

# Stats Panel

A simple multi-file block with a component and local data helper.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/stats-panel.json
```

[Registry JSON](https://ui.uptoolkit.com/r/stats-panel.json)

## Preview

```tsx
import { StatsPanel } from "@/components/stats-panel";

export function Preview() {
  return <StatsPanel />;
}
```

## Source

### components/stats-panel.tsx

```tsx
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { ExampleCard } from "@/components/ui/example-card";
import { stats } from "@/lib/stats-data";

function StatsPanel() {
  return (
    <div className="grid w-full max-w-3xl gap-4 md:grid-cols-[1fr_1.2fr]">
      <ExampleCard
        title="Registry starter"
        description="Compose local registry items with shadcn dependencies."
        status="Block"
      />
      <Card>
        <CardHeader>
          <CardTitle>Registry health</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="flex items-center justify-between gap-4 rounded-md border p-3"
            >
              <div className="flex flex-col gap-1">
                <span className="text-sm font-medium">{stat.label}</span>
                <span className="text-sm text-muted-foreground">{stat.detail}</span>
              </div>
              <Badge variant="secondary">{stat.value}</Badge>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}

export { StatsPanel };
```

### lib/stats-data.ts

```ts
type Stat = {
  label: string;
  value: string;
  detail: string;
};

const stats: Stat[] = [
  {
    label: "Components",
    value: "12",
    detail: "Ready to publish",
  },
  {
    label: "Blocks",
    value: "3",
    detail: "Documented examples",
  },
  {
    label: "Schema",
    value: "100%",
    detail: "Validated output",
  },
];

export { stats, type Stat };
```

## Usage

Use the panel as a dashboard summary block. It installs the component and the local data helper
together, plus its local `example-card` dependency.

```tsx
import { StatsPanel } from "@/components/stats-panel";

<StatsPanel />
```

---

URL: https://ui.uptoolkit.com/blocks/wall-feed.md

Activity feed for a profile wall: posts, boosts, reactions, follows, and photo albums in one grouped stream.

# Wall Feed

Activity feed for a profile wall: posts, boosts, reactions, follows, and photo albums in one grouped stream.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/wall-feed.json
```

[Registry JSON](https://ui.uptoolkit.com/r/wall-feed.json)

## Preview

```tsx
import { WallFeed } from "@/components/wall-feed";

export function Preview() {
  return <WallFeed showComments />;
}
```

## Source

### components/wall-feed.tsx

```tsx
"use client";

import {
  IconCalendarPlus,
  IconHeartFilled,
  IconPhoto,
  IconUserPlus,
  IconUsersGroup,
} from "@tabler/icons-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

import { ActorAvatar } from "@/components/ui/actor-avatar";
import { CommentThread } from "@/components/ui/comment-thread";
import { JsonLd } from "@/components/json-ld";
import { PostCard } from "@/components/ui/post-card";
import { PostComposer } from "@/components/ui/post-composer";
import {
  formatPublishedTime,
  getActorDisplayName,
  getCollectionItems,
  toPlainText,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
  type ActivityPubDocument,
  type ActivityPubObject,
} from "@/lib/activitypub";
import { toFeedJsonLd } from "@/lib/schema-org";
import {
  SAMPLE_NOW,
  sampleAuthor,
  sampleViewer,
} from "@/lib/social-sample-data";
import {
  countWallEntries,
  filterWallEntries,
  groupWallEntries,
  sampleWallCollection,
  toWallEntries,
  type WallActivity,
  type WallEntry,
  type WallEntryKind,
  type WallFilter,
} from "@/lib/wall-activities";

/** Copy and iconography for the collapsed, non-post rows. */
/** The kinds that collapse to a single line. `post` and `share` render as cards. */
type WallRowKind = Exclude<WallEntryKind, "post" | "share">;

const kindConfig: Record<
  WallRowKind,
  { icon: typeof IconHeartFilled; tone: string; verb: string }
> = {
  reaction: {
    icon: IconHeartFilled,
    tone: "text-rose-600 dark:text-rose-400",
    verb: "reacted to a post",
  },
  follow: {
    icon: IconUserPlus,
    tone: "text-sky-600 dark:text-sky-400",
    verb: "started following",
  },
  album: {
    icon: IconPhoto,
    tone: "text-amber-600 dark:text-amber-400",
    verb: "added photos to an album",
  },
  profile: {
    icon: IconCalendarPlus,
    tone: "text-violet-600 dark:text-violet-400",
    verb: "updated their profile",
  },
  join: {
    icon: IconUsersGroup,
    tone: "text-teal-600 dark:text-teal-400",
    verb: "joined a group",
  },
};

const filterLabels = {
  all: "All activity",
  posts: "Posts",
  photos: "Photos",
  people: "People",
  wall: "Wall posts",
} as const satisfies Record<WallFilter, string>;

const filterOrder = [
  "all",
  "posts",
  "photos",
  "people",
  "wall",
] as const satisfies readonly WallFilter[];

function isWallFilter(value: unknown): value is WallFilter {
  return typeof value === "string" && filterOrder.some((filter) => filter === value);
}

type WallFeedProps = Omit<React.ComponentProps<"section">, "children"> & {
  /** The actor whose wall this is. Drives addressing and the visitor split. */
  owner?: ActivityPubActor;
  /** The signed-in actor. Omit for a signed-out, read-only wall. */
  viewer?: ActivityPubActor;
  /** An `outbox` page of wall activities. */
  collection?: ActivityPubCollection<WallActivity> | readonly WallActivity[];
  heading?: string;
  defaultFilter?: WallFilter;
  /** Hide the filter row, for an embedded or single-purpose wall. */
  hideFilters?: boolean;
  /** Hide the composer, for a wall that does not accept visitor posts. */
  hideComposer?: boolean;
  /** Show an inline comment thread under each post. */
  showComments?: boolean;
  /** Called with the `Create` activity from the composer. */
  onPublish?: (activity: ActivityPubActivity<ActivityPubObject>) => void | Promise<void>;
  /** Called with the collection's `next` page URL. */
  onLoadMore?: (next: string) => void | Promise<void>;
  /** Any activity a post emits: Like, EmojiReact, Announce, or the Undo. */
  onActivity?: (activity: ActivityPubActivity<unknown>) => void;
  /** Called when a collapsed activity row is selected. */
  onSelect?: (entry: WallEntry) => void;
  /** Fixed "now" for relative timestamps. */
  now?: Date | number;
  /** BCP 47 locale for dates and counts. Must match on server and client. */
  locale?: string;
};

/**
 * Activity feed for a profile wall.
 *
 * Unlike a timeline, this renders the whole activity vocabulary: `Create` and
 * `Announce` become full post cards, while reactions, follows, album additions,
 * profile changes, and group joins collapse into single attributed lines. The
 * stream is bucketed by day and described by one Schema.org `CollectionPage`.
 */
function WallFeed({
  owner = sampleAuthor,
  viewer = sampleViewer,
  collection = sampleWallCollection,
  heading,
  defaultFilter = "all",
  hideFilters = false,
  hideComposer = false,
  showComments = false,
  onPublish,
  onLoadMore,
  onActivity,
  onSelect,
  now = SAMPLE_NOW,
  locale,
  className,
  ...props
}: WallFeedProps) {
  const [filter, setFilter] = React.useState<WallFilter>(defaultFilter);
  /** Posts written in this session, kept until the caller refetches. */
  const [published, setPublished] = React.useState<WallActivity[]>([]);
  const [loadingMore, setLoadingMore] = React.useState(false);

const ownerName = getActorDisplayName(owner);
  const label = heading ?? `${ownerName}'s wall`;
  const next = collection && "type" in collection ? collection.next : undefined;

const entries = React.useMemo(
    () => toWallEntries([...published, ...getCollectionItems(collection)], owner),
    [collection, owner, published],
  );

const visible = React.useMemo(() => filterWallEntries(entries, filter), [entries, filter]);
  const groups = React.useMemo(
    () => groupWallEntries(visible, { now, ...(locale === undefined ? {} : { locale }) }),
    [visible, now, locale],
  );

// Only the full post cards belong in the CollectionPage; a "liked a post"
  // row is not itself a posting.
  const postings = React.useMemo(
    () =>
      visible.flatMap((entry) =>
        (entry.kind === "post" || entry.kind === "share") && entry.object ? [entry.object] : [],
      ),
    [visible],
  );

const counts = React.useMemo(() => countWallEntries(entries), [entries]);

const handlePublish = React.useCallback(
    async (activity: ActivityPubActivity<ActivityPubObject>) => {
      setPublished((current) => [activity, ...current]);
      await onPublish?.(activity);
    },
    [onPublish],
  );

const handleLoadMore = React.useCallback(async () => {
    if (!next || loadingMore) {
      return;
    }

setLoadingMore(true);

try {
      await onLoadMore?.(next);
    } finally {
      setLoadingMore(false);
    }
  }, [loadingMore, next, onLoadMore]);

return (
    <section
      aria-label={label}
      className={cn("flex w-full max-w-xl flex-col gap-4", className)}
      {...props}
    >
      <JsonLd
        data={toFeedJsonLd(postings, {
          name: label,
          ...(collection && "type" in collection && collection.id ? { url: collection.id } : {}),
        })}
      />

{hideComposer || !viewer ? null : (
        <PostComposer
          author={viewer}
          placeholder={
            viewer.id === owner.id ? "What's on your mind?" : `Write something to ${ownerName}...`
          }
          submitLabel={viewer.id === owner.id ? "Post" : "Post to wall"}
          onSubmit={(activity) => handlePublish(activity)}
        />
      )}

{hideFilters ? null : (
        <Tabs
          value={filter}
          onValueChange={(value: unknown) => setFilter(isWallFilter(value) ? value : "all")}
        >
          <TabsList
            variant="line"
            className="flex-wrap justify-start group-data-horizontal/tabs:h-auto"
          >
            {filterOrder.map((value) => (
              <TabsTrigger key={value} value={value} disabled={counts[value] === 0}>
                {filterLabels[value]}
                <Badge variant="secondary">{counts[value]}</Badge>
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
      )}

{groups.length === 0 ? (
        <Card>
          <CardContent className="py-10 text-center">
            <p className="m-0 text-sm font-medium">Nothing here yet</p>
            <p className="m-0 text-sm text-muted-foreground">
              {filter === "all"
                ? `${ownerName} has not posted anything.`
                : "Try a different filter."}
            </p>
          </CardContent>
        </Card>
      ) : (
        groups.map((group) => (
          <section key={group.id} aria-label={group.label} className="flex flex-col gap-3">
            <div className="flex items-center gap-3">
              <h3 className="m-0 text-xs font-medium tracking-wide text-muted-foreground uppercase">
                {group.label}
              </h3>
              <Separator className="flex-1" />
            </div>

<ol className="m-0 flex list-none flex-col gap-3 p-0">
              {group.entries.map((entry) => {
                const kind = entry.kind;

return (
                  <li key={entry.activity.id}>
                    {kind === "post" || kind === "share" ? (
                      <WallPostEntry
                        entry={entry}
                        owner={owner}
                        viewer={viewer}
                        showComments={showComments}
                        now={now}
                        {...(locale === undefined ? {} : { locale })}
                        {...(onActivity ? { onActivity } : {})}
                      />
                    ) : (
                      <WallActivityRow
                        entry={entry}
                        kind={kind}
                        now={now}
                        {...(locale === undefined ? {} : { locale })}
                        {...(onSelect ? { onSelect } : {})}
                      />
                    )}
                  </li>
                );
              })}
            </ol>
          </section>
        ))
      )}

{next ? (
        <Button
          type="button"
          variant="outline"
          className="self-center"
          disabled={loadingMore}
          onClick={() => void handleLoadMore()}
        >
          {loadingMore ? "Loading..." : "Load earlier activity"}
        </Button>
      ) : null}
    </section>
  );
}

/** A full post card, with a "wrote on your wall" ribbon when it is a visitor's. */
function WallPostEntry({
  entry,
  owner,
  viewer,
  showComments,
  now,
  locale,
  onActivity,
}: {
  entry: WallEntry;
  owner: ActivityPubActor;
  viewer?: ActivityPubActor;
  showComments: boolean;
  now: Date | number;
  locale?: string;
  onActivity?: (activity: ActivityPubActivity<unknown>) => void;
}) {
  if (!entry.object) {
    return null;
  }

const isWallPost = entry.kind === "post" && entry.fromVisitor;

return (
    <div className="flex flex-col gap-1.5">
      {isWallPost ? (
        <p className="m-0 flex items-center gap-1.5 px-1 text-xs text-muted-foreground">
          <IconUserPlus aria-hidden="true" className="size-3.5" />
          <span>
            <span className="font-medium text-foreground">{getActorDisplayName(entry.actor)}</span>{" "}
            wrote on {getActorDisplayName(owner)}’s wall
          </span>
        </p>
      ) : null}

<PostCard
        object={entry.object}
        activity={{ ...entry.activity, object: entry.object }}
        {...(viewer ? { viewer } : {})}
        now={now}
        {...(locale === undefined ? {} : { locale })}
        {...(onActivity
          ? {
              onLike: onActivity,
              onUnlike: onActivity,
              onShare: onActivity,
              onUnshare: onActivity,
            }
          : {})}
      >
        {showComments ? (
          <>
            <Separator />
            <CommentThread
              object={entry.object}
              {...(viewer ? { viewer } : {})}
              now={now}
              {...(locale === undefined ? {} : { locale })}
              initialCount={2}
            />
          </>
        ) : null}
      </PostCard>
    </div>
  );
}

/** One collapsed line for a reaction, follow, album, profile change, or join. */
function WallActivityRow({
  entry,
  kind,
  now,
  locale,
  onSelect,
}: {
  entry: WallEntry;
  kind: WallRowKind;
  now: Date | number;
  locale?: string;
  onSelect?: (entry: WallEntry) => void;
}) {
  const config = kindConfig[kind];
  const Icon = config.icon;
  const photos = (entry.object?.attachment ?? []).filter(
    (file): file is ActivityPubDocument => file.type === "Image",
  );
  const detail = getEntryDetail(entry);
  const isEmoji = entry.activity.type === "EmojiReact" && Boolean(entry.activity.content);
  const Wrapper = onSelect ? "button" : "div";

return (
    <Card className="gap-0 py-3">
      <CardContent className="flex flex-col gap-3">
        <Wrapper
          {...(onSelect ? { type: "button" as const, onClick: () => onSelect(entry) } : {})}
          className={cn(
            "flex w-full items-start gap-3 text-left",
            onSelect && "rounded-md transition-colors hover:opacity-80",
          )}
        >
          <span className="relative shrink-0">
            <ActorAvatar actor={entry.actor} size="sm" />
            <span
              className={cn(
                "absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full bg-background ring-1 ring-border",
                config.tone,
              )}
            >
              {isEmoji ? (
                <span aria-hidden="true" className="text-[10px] leading-none">
                  {entry.activity.content}
                </span>
              ) : (
                <Icon aria-hidden="true" className="size-2.5" />
              )}
            </span>
          </span>

<span className="flex min-w-0 flex-1 flex-col gap-0.5">
            <span className="text-sm">
              <span className="font-semibold">{getActorDisplayName(entry.actor)}</span>{" "}
              <span className="text-muted-foreground">{config.verb}</span>
              {detail ? <span className="font-medium"> {detail}</span> : null}
            </span>
            <time dateTime={entry.published} className="text-xs text-muted-foreground">
              {formatPublishedTime(entry.published, {
                now,
                ...(locale === undefined ? {} : { locale }),
              })}
            </time>
          </span>
        </Wrapper>

{photos.length > 0 ? (
          <ul className="m-0 grid list-none grid-cols-4 gap-1.5 p-0 sm:grid-cols-5">
            {photos.slice(0, 5).map((photo) => (
              <li key={photo.url} className="overflow-hidden rounded-md border">
                <img
                  src={photo.url}
                  alt={photo.name ?? ""}
                  loading="lazy"
                  className="aspect-square size-full object-cover"
                />
              </li>
            ))}
          </ul>
        ) : null}
      </CardContent>
    </Card>
  );
}

/**
 * The trailing noun for a collapsed row: an album title, the followed actor's
 * name, or a short excerpt of the post that was reacted to.
 */
function getEntryDetail(entry: WallEntry): string | undefined {
  if (entry.kind === "follow" || entry.kind === "join") {
    return entry.target ? getActorDisplayName(entry.target) : undefined;
  }

if (entry.kind === "album" || entry.kind === "profile") {
    return entry.object?.name ?? undefined;
  }

const text = toPlainText(entry.object?.content) || entry.object?.name;

if (!text) {
    return undefined;
  }

return `“${text.length > 60 ? `${text.slice(0, 59)}…` : text}”`;
}

export { WallFeed, kindConfig, type WallFeedProps };
```

### lib/wall-activities.ts

```ts
/**
 * Wall activity vocabulary and fixtures.
 *
 * A wall stream is wider than a timeline: alongside `Create` and `Announce` it
 * carries the small social signals — reactions, follows, joins, album additions,
 * profile changes — that a plain feed drops on the floor. Everything here is
 * shaped like real ActivityStreams so swapping in an `outbox` page is a matter
 * of replacing {@link sampleWallCollection}.
 */

import {
  ACTIVITY_STREAMS_CONTEXT,
  PUBLIC_AUDIENCE,
  resolveActor,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
  type ActivityPubDocument,
  type ActivityPubObject,
} from "@/lib/activitypub";
import {
  SAMPLE_NOW,
  articlePost,
  buildCreateActivity,
  mentionPost,
  samplePost,
  sampleAuthor,
  sampleFollowers,
  sampleSuggestions,
  sampleViewer,
} from "@/lib/social-sample-data";

/**
 * Any activity a wall can carry.
 *
 * The object may be a bare IRI, an inlined object, or — for `Follow` and
 * `Join` — the actor or group being acted upon.
 */
export type WallActivity = ActivityPubActivity<ActivityPubObject | ActivityPubActor | string>;

/**
 * How a wall entry is rendered.
 *
 * `post` entries get a full card with reactions and comments; every other kind
 * collapses to a single attributed line.
 */
export type WallEntryKind = "post" | "share" | "reaction" | "follow" | "album" | "profile" | "join";

/** Filter buckets shown above the stream. */
export type WallFilter = "all" | "posts" | "photos" | "people" | "wall";

export type WallEntry = {
  activity: WallActivity;
  actor: ActivityPubActor;
  kind: WallEntryKind;
  /** The resolved object, when the activity carries one inline. */
  object?: ActivityPubObject;
  /** The actor or group acted upon, for `Follow` and `Join`. */
  target?: ActivityPubActor;
  /** True when this is a post someone else wrote *on* the owner's wall. */
  fromVisitor: boolean;
  published: string;
};

/** An actor is the only thing in the vocabulary with a `preferredUsername`. */
function isWallActor(value: WallActivity["object"]): value is ActivityPubActor {
  return typeof value === "object" && value !== null && "preferredUsername" in value;
}

function isWallObject(value: WallActivity["object"]): value is ActivityPubObject {
  return typeof value === "object" && value !== null && "attributedTo" in value;
}

function minutesAgo(minutes: number): string {
  return new Date(SAMPLE_NOW.getTime() - minutes * 60_000).toISOString();
}

function buildImage(seed: string, name: string): ActivityPubDocument {
  return {
    type: "Image",
    mediaType: "image/svg+xml",
    url: `https://api.dicebear.com/9.x/shapes/svg?seed=${seed}`,
    name,
    width: 600,
    height: 600,
  };
}

/** A note written by a visitor onto the owner's wall. */
function buildWallPost(options: {
  author: ActivityPubActor;
  owner: ActivityPubActor;
  slug: string;
  content: string;
  minutesAgo: number;
  attachment?: readonly ActivityPubDocument[];
  likes?: number;
  shares?: number;
}): ActivityPubObject {
  const id = `${options.author.id}/posts/${options.slug}`;

return {
    id,
    type: "Note",
    attributedTo: options.author,
    content: options.content,
    published: minutesAgo(options.minutesAgo),
    url: id,
    inLanguage: "en",
    // A wall post is addressed to the owner as well as the public, which is
    // what marks it as "on their wall" rather than a post that merely mentions
    // them.
    to: [PUBLIC_AUDIENCE],
    cc: [options.owner.id],
    audience: [options.owner.id],
    tag: [{ type: "Mention", name: `@${options.owner.preferredUsername}`, href: options.owner.id }],
    ...(options.attachment ? { attachment: options.attachment } : {}),
    likes: { type: "Collection", id: `${id}/likes`, totalItems: options.likes ?? 0 },
    shares: { type: "Collection", id: `${id}/shares`, totalItems: options.shares ?? 0 },
    replies: { type: "Collection", id: `${id}/replies`, totalItems: 0, items: [] },
  };
}

const welcomeWallPost = buildWallPost({
  author: sampleViewer,
  owner: sampleAuthor,
  slug: "wall-welcome",
  minutesAgo: 18,
  content:
    "<p>Congratulations on the atlas launch. Ten years of survey work and it finally has a front door.</p>",
  likes: 34,
  shares: 2,
});

const photoWallPost = buildWallPost({
  author: sampleFollowers[2],
  owner: sampleAuthor,
  slug: "wall-fieldwork-photos",
  minutesAgo: 320,
  content: "<p>Found these from the Svalbard trip. You were holding the theodolite backwards.</p>",
  attachment: [
    buildImage("svalbard-1", "Two surveyors on a snowfield with a theodolite"),
    buildImage("svalbard-2", "A weathered field notebook open on a rock"),
  ],
  likes: 88,
  shares: 4,
});

const albumPhotos: readonly ActivityPubDocument[] = [
  buildImage("atlas-plate-1", "Contour plate one, inked"),
  buildImage("atlas-plate-2", "Contour plate two, inked"),
  buildImage("atlas-plate-3", "Contour plate three, with survey annotations"),
  buildImage("atlas-plate-4", "Contour plate four, coastline detail"),
  buildImage("atlas-plate-5", "Contour plate five, elevation shading"),
];

const photoAlbum: ActivityPubObject = {
  id: `${sampleAuthor.id}/collections/atlas-plates`,
  type: "Page",
  attributedTo: sampleAuthor,
  name: "Atlas plates, 2019-2025",
  content: "<p>Every inked plate from the atlas, in order.</p>",
  published: minutesAgo(1450),
  url: `${sampleAuthor.id}/collections/atlas-plates`,
  attachment: albumPhotos,
};

const coverUpdate: ActivityPubObject = {
  id: `${sampleAuthor.id}#cover`,
  type: "Image",
  attributedTo: sampleAuthor,
  name: "New cover image",
  published: minutesAgo(2600),
  attachment: [buildImage("mira-cover-2025", "Cover image: a stylised contour field")],
};

/**
 * A wall page shaped like an `outbox` response, newest first.
 *
 * Deliberately mixes every activity type the feed knows how to render so the
 * block is a working demonstration the moment it is installed.
 */
export const sampleWallCollection: ActivityPubCollection<WallActivity> = {
  "@context": ACTIVITY_STREAMS_CONTEXT,
  id: `${sampleAuthor.id}/outbox?page=1`,
  type: "OrderedCollection",
  totalItems: 486,
  orderedItems: [
    buildCreateActivity(welcomeWallPost),
    {
      id: `${sampleFollowers[1].id}/activities/like/5512`,
      type: "Like",
      actor: sampleFollowers[1],
      object: samplePost,
      published: minutesAgo(26),
    },
    buildCreateActivity(samplePost),
    {
      id: `${sampleAuthor.id}/activities/announce/881`,
      type: "Announce",
      actor: sampleAuthor,
      object: articlePost,
      published: minutesAgo(96),
    },
    {
      id: `${sampleSuggestions[0].id}/activities/follow/301`,
      type: "Follow",
      actor: sampleSuggestions[0],
      object: sampleAuthor.id,
      published: minutesAgo(140),
    },
    buildCreateActivity(photoWallPost),
    {
      id: `${sampleFollowers[3].id}/activities/emojireact/992`,
      type: "EmojiReact",
      actor: sampleFollowers[3],
      content: "\u{1F5FA}\u{FE0F}",
      object: samplePost,
      published: minutesAgo(400),
    },
    buildCreateActivity(mentionPost),
    {
      id: `${sampleAuthor.id}/activities/add/77`,
      type: "Add",
      actor: sampleAuthor,
      object: photoAlbum,
      target: `${sampleAuthor.id}/collections/atlas-plates`,
      published: minutesAgo(1450),
    },
    {
      id: `${sampleAuthor.id}/activities/join/4`,
      type: "Join",
      actor: sampleAuthor,
      object: sampleFollowers[4],
      published: minutesAgo(2100),
    },
    {
      id: `${sampleAuthor.id}/activities/update/12`,
      type: "Update",
      actor: sampleAuthor,
      object: coverUpdate,
      published: minutesAgo(2600),
    },
  ],
  next: `${sampleAuthor.id}/outbox?page=2`,
};

/** Classifies an activity into the row the wall renders for it. */
export function getWallEntryKind(activity: WallActivity): WallEntryKind | undefined {
  switch (activity.type) {
    case "Create":
      return "post";
    case "Announce":
      return "share";
    case "Like":
    case "EmojiReact":
      return "reaction";
    case "Follow":
      return "follow";
    case "Add":
      return "album";
    case "Update":
      return "profile";
    case "Join":
      return "join";
    default:
      return undefined;
  }
}

/**
 * A post is "on the wall" when it is addressed to the owner by someone else,
 * which is how the visitor/owner split is drawn without a second field.
 */
function isVisitorPost(object: ActivityPubObject | undefined, ownerId: string): boolean {
  if (!object) {
    return false;
  }

return [...(object.cc ?? []), ...(object.audience ?? [])].includes(ownerId);
}

/** Resolves a collection of raw activities into renderable wall entries. */
export function toWallEntries(
  activities: readonly WallActivity[],
  owner: ActivityPubActor,
): WallEntry[] {
  return activities.flatMap((activity) => {
    const kind = getWallEntryKind(activity);
    const actor = resolveActor(activity.actor);

if (!kind || !actor) {
      return [];
    }

const object = isWallObject(activity.object) ? activity.object : undefined;
    // A `Follow` on someone's own wall usually addresses them by bare IRI, so
    // resolve that back to the owner rather than rendering a verb with no noun.
    const target = isWallActor(activity.object)
      ? activity.object
      : activity.object === owner.id
        ? owner
        : undefined;
    const published = activity.published ?? object?.published;

if (!published) {
      return [];
    }

return [
      {
        activity,
        actor,
        kind,
        ...(object ? { object } : {}),
        ...(target ? { target } : {}),
        fromVisitor: actor.id !== owner.id && isVisitorPost(object, owner.id),
        published,
      },
    ];
  });
}

const filterPredicates = {
  all: () => true,
  posts: (entry: WallEntry) => entry.kind === "post" || entry.kind === "share",
  photos: (entry: WallEntry) =>
    entry.kind === "album" ||
    entry.kind === "profile" ||
    (entry.object?.attachment ?? []).some((file) => file.type === "Image"),
  people: (entry: WallEntry) => entry.kind === "follow" || entry.kind === "join",
  wall: (entry: WallEntry) => entry.kind === "post" && entry.fromVisitor,
} as const satisfies Record<WallFilter, (entry: WallEntry) => boolean>;

export function filterWallEntries(entries: readonly WallEntry[], filter: WallFilter): WallEntry[] {
  return entries.filter(filterPredicates[filter]);
}

/** Size of every filter bucket, so the filter row can label and disable tabs. */
export function countWallEntries(entries: readonly WallEntry[]): Record<WallFilter, number> {
  return {
    all: filterWallEntries(entries, "all").length,
    posts: filterWallEntries(entries, "posts").length,
    photos: filterWallEntries(entries, "photos").length,
    people: filterWallEntries(entries, "people").length,
    wall: filterWallEntries(entries, "wall").length,
  };
}

export type WallEntryGroup = {
  /** Stable key derived from the calendar day, safe for SSR. */
  id: string;
  label: string;
  entries: WallEntry[];
};

/**
 * Buckets entries into "Today", "Yesterday", then month headings.
 *
 * The label is computed from `now` rather than the wall clock so a server render
 * and its hydration agree.
 */
export function groupWallEntries(
  entries: readonly WallEntry[],
  options: { now?: Date | number; locale?: string } = {},
): WallEntryGroup[] {
  const now = new Date(options.now ?? SAMPLE_NOW);
  const today = toDayKey(now);
  const yesterday = toDayKey(new Date(now.getTime() - 86_400_000));
  const groups: WallEntryGroup[] = [];

for (const entry of entries) {
    const date = new Date(entry.published);
    const dayKey = toDayKey(date);
    const id = dayKey === today || dayKey === yesterday ? dayKey : toMonthKey(date);
    const label =
      dayKey === today
        ? "Today"
        : dayKey === yesterday
          ? "Yesterday"
          : formatMonth(date, options.locale);
    const current = groups.at(-1);

if (current?.id === id) {
      current.entries.push(entry);
    } else {
      groups.push({ id, label, entries: [entry] });
    }
  }

return groups;
}

function toDayKey(date: Date): string {
  return date.toISOString().slice(0, 10);
}

function toMonthKey(date: Date): string {
  return date.toISOString().slice(0, 7);
}

function formatMonth(date: Date, locale?: string): string {
  return new Intl.DateTimeFormat(locale ?? "en-US", {
    month: "long",
    year: "numeric",
    timeZone: "UTC",
  }).format(date);
}
```

## Usage

A wall is wider than a timeline. Alongside `Create` and `Announce` it carries the small signals a
plain feed throws away — reactions, follows, album additions, profile changes, group joins — and
this block renders all of them in one stream.

```tsx
import { WallFeed } from "@/components/wall-feed";

const outbox = await fetchOutbox(owner);

<WallFeed
  owner={owner}
  viewer={viewer}
  collection={outbox}
  showComments
  onPublish={(activity) => postToOutbox(viewer, activity)}
  onLoadMore={(next) => fetchPage(next)}
/>
```

### Two row shapes

`Create` and `Announce` render as full [`post-card`](/components/post-card) cards with reactions and
an optional comment thread. Everything else collapses to a single attributed line with an avatar, a
verb, and a timestamp — the same visual language as
[`notifications-panel`](/blocks/notifications-panel), so the two read as one system. An `Add` of a
photo album additionally renders a thumbnail strip.

### Owner posts and visitor posts

A post counts as written *on* the wall when it addresses the owner in `cc` or `audience` and comes
from someone else. Those get a "wrote on X's wall" ribbon above the card, and the **Wall posts**
filter narrows to exactly that set. No extra field is needed — the addressing already says it.

### Filters and grouping

The filter row counts each bucket up front and disables the empty ones, so you never tab into a
blank list. Entries are then bucketed into `Today`, `Yesterday`, and month headings. Both the
buckets and the relative timestamps are computed from the `now` prop rather than the wall clock, so
a server render and its hydration agree.

### Publishing and pagination

Composed posts are prepended immediately and kept until you refetch, so the wall never appears to
swallow a post in flight. When the collection has a `next` URL, a "Load earlier activity" button
passes it to `onLoadMore`.

### Structured data

The block emits one Schema.org `CollectionPage` wrapping an `ItemList` of postings. Only real posts
go in it — a "liked a post" row is not itself a posting, so it is left out rather than padding the
list.

Without a `collection` the block renders its own `wall-activities` fixtures, which cover every
activity type it knows how to draw.

---

URL: https://ui.uptoolkit.com/layouts.md

Reusable app shells and page layouts you can drop straight into a route.

# Layouts

Reusable app shells and page layouts you can drop straight into a route.

- [App Shell](https://ui.uptoolkit.com/layouts/app-shell): Primary authenticated app shell with a top nav, search, notifications, and a user menu around a content slot.
- [Public Profile Shell](https://ui.uptoolkit.com/layouts/public-profile-shell): Actor profile layout that pairs the profile header with a two-column content slot for signed-out visitors.
- [Public Shell](https://ui.uptoolkit.com/layouts/public-shell): Signed-out marketing shell with a top nav, sign-in actions, and a footer around a content slot.
- [Settings Shell](https://ui.uptoolkit.com/layouts/settings-shell): Sidebar section nav and content pane shell for account settings pages.

---

URL: https://ui.uptoolkit.com/layouts/app-shell.md

Primary authenticated app shell with a top nav, search, notifications, and a user menu around a content slot.

# App Shell

Primary authenticated app shell with a top nav, search, notifications, and a user menu around a content slot.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/app-shell.json
```

[Registry JSON](https://ui.uptoolkit.com/r/app-shell.json)

## Preview

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { sampleViewer } from "@/lib/social-sample-data";
import { AppShell } from "@/components/app-shell";

export function Preview() {
  return (
    <AppShell
      viewer={sampleViewer}
      notificationsCount={3}
      onSearch={() => {}}
      nav={[
        { label: "Home", href: "#", active: true },
        { label: "Explore", href: "#" },
        { label: "Notifications", href: "#" },
      ]}
    >
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Feed</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="m-0 text-sm text-muted-foreground">
            Page content renders in the shell's content slot.
          </p>
        </CardContent>
      </Card>
    </AppShell>
  );
}
```

## Source

### components/app-shell.tsx

```tsx
"use client";

import {
  IconBell,
  IconLogout,
  IconMenu2,
  IconSearch,
  IconSettings,
  IconUser,
  type Icon,
} from "@tabler/icons-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

import { ActorAvatar } from "@/components/ui/actor-avatar";
import {
  getActorDisplayName,
  getActorHandle,
  type ActivityPubActor,
} from "@/lib/activitypub";
import { sampleViewer } from "@/lib/social-sample-data";

type AppShellNavItem = {
  label: string;
  href: string;
  icon?: Icon;
  /** Marks the current route. The shell does not do routing itself. */
  active?: boolean;
};

type AppShellProps = {
  /** The signed-in actor, shown in the header avatar and account menu. */
  viewer?: ActivityPubActor;
  brand?: { name: string; href?: string };
  nav?: readonly AppShellNavItem[];
  /** Shows a count badge on the notifications button. */
  notificationsCount?: number;
  onNotificationsClick?: () => void;
  /** Renders a search field in the header and reports submitted queries. */
  onSearch?: (query: string) => void;
  onProfileClick?: () => void;
  onSettingsClick?: () => void;
  onSignOut?: () => void;
  children?: React.ReactNode;
  className?: string;
};

const defaultNav: readonly AppShellNavItem[] = [
  { label: "Home", href: "#", active: true },
  { label: "Explore", href: "#" },
  { label: "Notifications", href: "#" },
];

/**
 * Primary shell for the signed-in app: sticky header with nav, search,
 * notifications, and an account menu, wrapped around a content slot.
 *
 * The header collapses into a `Sheet` under `md`. Nav items are plain
 * anchors with an `active` flag rather than a router `Link`, so swapping in
 * your router's link component is the only integration step.
 */
function AppShell({
  viewer = sampleViewer,
  brand = { name: "Uptoolkit", href: "#" },
  nav = defaultNav,
  notificationsCount = 0,
  onNotificationsClick,
  onSearch,
  onProfileClick,
  onSettingsClick,
  onSignOut,
  children,
  className,
}: AppShellProps) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const displayName = getActorDisplayName(viewer);

return (
    <div className={cn("min-h-svh bg-muted/40", className)}>
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
        <div className="mx-auto flex h-14 max-w-5xl items-center gap-3 px-4">
          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
            <SheetTrigger render={<Button variant="ghost" size="icon" className="md:hidden" />}>
              <IconMenu2 aria-hidden="true" />
              <span className="sr-only">Toggle menu</span>
            </SheetTrigger>
            <SheetContent side="left" className="w-64 p-0">
              <SheetTitle className="sr-only">Navigation</SheetTitle>
              <nav aria-label="Primary" className="flex flex-col gap-1 p-4 pt-12">
                {nav.map((item) => (
                  <a
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileOpen(false)}
                    aria-current={item.active ? "page" : undefined}
                    className={cn(
                      "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium",
                      item.active
                        ? "bg-secondary text-secondary-foreground"
                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                    )}
                  >
                    {item.icon ? <item.icon aria-hidden="true" className="size-4" /> : null}
                    {item.label}
                  </a>
                ))}
              </nav>
            </SheetContent>
          </Sheet>

<a
            href={brand.href ?? "#"}
            className="flex shrink-0 items-center gap-2 font-semibold tracking-tight"
          >
            {brand.name}
          </a>

<nav aria-label="Primary" className="hidden items-center gap-1 md:flex">
            {nav.map((item) => (
              <a
                key={item.href}
                href={item.href}
                aria-current={item.active ? "page" : undefined}
                className={cn(
                  "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
                  item.active
                    ? "bg-secondary text-secondary-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
              >
                {item.label}
              </a>
            ))}
          </nav>

<div className="ml-auto flex items-center gap-1.5">
            {onSearch ? (
              <form
                role="search"
                className="hidden md:block"
                onSubmit={(event) => {
                  event.preventDefault();
                  const data = new FormData(event.currentTarget);
                  const query = data.get("q");
                  onSearch(typeof query === "string" ? query : "");
                }}
              >
                <div className="relative">
                  <IconSearch
                    aria-hidden="true"
                    className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground"
                  />
                  <Input name="q" placeholder="Search" aria-label="Search" className="w-48 pl-7" />
                </div>
              </form>
            ) : null}

<Button
              variant="ghost"
              size="icon"
              aria-label="Notifications"
              onClick={onNotificationsClick}
              className="relative"
            >
              <IconBell aria-hidden="true" />
              {notificationsCount > 0 ? (
                <Badge className="absolute -top-1 -right-1 h-4 min-w-4 justify-center px-1 text-[10px]">
                  {notificationsCount > 99 ? "99+" : notificationsCount}
                </Badge>
              ) : null}
            </Button>

<DropdownMenu>
              <DropdownMenuTrigger
                render={<Button variant="ghost" size="icon" className="rounded-full" />}
              >
                <ActorAvatar actor={viewer} size="sm" />
                <span className="sr-only">Open account menu</span>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" sideOffset={8} className="min-w-48">
                <DropdownMenuLabel className="flex flex-col gap-0 font-normal">
                  <span className="text-sm font-medium text-foreground">{displayName}</span>
                  <span className="text-xs text-muted-foreground">{getActorHandle(viewer)}</span>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={onProfileClick}>
                  <IconUser aria-hidden="true" />
                  Profile
                </DropdownMenuItem>
                <DropdownMenuItem onClick={onSettingsClick}>
                  <IconSettings aria-hidden="true" />
                  Settings
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive" onClick={onSignOut}>
                  <IconLogout aria-hidden="true" />
                  Sign out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

<main className="mx-auto max-w-5xl px-4 py-6">{children}</main>
    </div>
  );
}

export { AppShell, type AppShellNavItem, type AppShellProps };
```

## Usage

Sticky header with primary nav, an optional search field, a notifications button, and an account
dropdown, wrapped around a `children` content slot. The header collapses into a `Sheet` under `md`.

```tsx
import { AppShell } from "@/components/app-shell";

<AppShell
  viewer={viewer}
  nav={[
    { label: "Home", href: "/", active: true },
    { label: "Explore", href: "/explore" },
  ]}
  notificationsCount={unreadCount}
  onSearch={(query) => router.push(`/search?q=${query}`)}
  onSignOut={() => signOut()}
>
  {children}
</AppShell>;
```

### Routing

Nav items and the brand link are plain anchors with an `active` flag, not a router `Link`. Swap the
`<a>` in `nav.map` for your router's link component if you need client-side navigation, and drive
`active` from the current route.

### Account menu

`onProfileClick`, `onSettingsClick`, and `onSignOut` are called from the avatar dropdown; leave any
of them out to omit that behavior while keeping the menu item visible for now, or remove the item
from the component if you don't need it at all.

### Search

The search field only renders when `onSearch` is passed, so routes without search can drop the prop
entirely instead of hiding an empty input.

---

URL: https://ui.uptoolkit.com/layouts/public-profile-shell.md

Actor profile layout that pairs the profile header with a two-column content slot for signed-out visitors.

# Public Profile Shell

Actor profile layout that pairs the profile header with a two-column content slot for signed-out visitors.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/public-profile-shell.json
```

[Registry JSON](https://ui.uptoolkit.com/r/public-profile-shell.json)

## Preview

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { sampleAuthor, sampleCounts } from "@/lib/social-sample-data";
import { PublicProfileShell } from "@/components/public-profile-shell";

export function Preview() {
  return (
    <PublicProfileShell
      actor={sampleAuthor}
      counts={sampleCounts.author}
      aside={
        <Card className="gap-3 py-4">
          <CardHeader>
            <CardTitle className="text-base">Mutual contacts</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="m-0 text-sm text-muted-foreground">Rail content goes in `aside`.</p>
          </CardContent>
        </Card>
      }
    >
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Timeline</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="m-0 text-sm text-muted-foreground">
            The timeline or wall feed renders in the shell's content slot.
          </p>
        </CardContent>
      </Card>
    </PublicProfileShell>
  );
}
```

## Source

### components/public-profile-shell.tsx

```tsx
"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

import { ProfileHeader, type ProfileHeaderProps } from "@/components/profile-header";
import type { ActivityPubActor } from "@/lib/activitypub";
import { sampleAuthor, sampleCounts } from "@/lib/social-sample-data";

type PublicProfileShellProps = {
  actor?: ActivityPubActor;
  brand?: { name: string; href?: string };
  signInHref?: string;
  /** Rail content, rendered alongside `children` in a two-column layout at `lg` and up. */
  aside?: React.ReactNode;
  /** Places `aside` before `children` on wide screens. */
  asideFirst?: boolean;
  children?: React.ReactNode;
  className?: string;
} & Pick<
  ProfileHeaderProps,
  | "counts"
  | "tabs"
  | "defaultTab"
  | "onFollow"
  | "onUnfollow"
  | "onMessage"
  | "includeJsonLd"
  | "locale"
>;

/**
 * Layout for a signed-out visitor viewing an actor's public profile: a
 * minimal top bar, the `ProfileHeader` block, and a two-column area for the
 * timeline plus an optional rail.
 *
 * `viewer` is intentionally left out of `ProfileHeader` here since the
 * visitor isn't signed in — pass `onFollow`/`onUnfollow` that redirect to
 * `signInHref` if you want the follow control to gate on sign-in.
 */
function PublicProfileShell({
  actor = sampleAuthor,
  brand = { name: "Uptoolkit", href: "#" },
  signInHref = "#",
  counts = sampleCounts.author,
  tabs,
  defaultTab,
  onFollow,
  onUnfollow,
  onMessage,
  includeJsonLd = true,
  locale,
  aside,
  asideFirst = false,
  children,
  className,
}: PublicProfileShellProps) {
  return (
    <div className={cn("min-h-svh bg-muted/40", className)}>
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
        <div className="mx-auto flex h-14 max-w-5xl items-center gap-3 px-4">
          <a
            href={brand.href ?? "#"}
            className="flex shrink-0 items-center gap-2 font-semibold tracking-tight"
          >
            {brand.name}
          </a>
          <Button
            size="sm"
            nativeButton={false}
            render={<a href={signInHref} />}
            className="ml-auto"
          >
            Sign in
          </Button>
        </div>
      </header>

<div className="flex flex-col gap-6 lg:flex-row">
          <main className="min-w-0 flex-1">{children}</main>

{aside ? (
            <aside
              className={cn(
                "flex w-full shrink-0 flex-col gap-4 lg:w-80",
                asideFirst && "lg:order-first",
              )}
            >
              {aside}
            </aside>
          ) : null}
        </div>
      </div>
    </div>
  );
}

export { PublicProfileShell, type PublicProfileShellProps };
```

## Usage

A minimal top bar, the [`ProfileHeader`](/blocks/profile-header) block, and a two-column area for the
timeline plus an optional rail — the layout `profile-page` and `wall-page` compose inline, pulled out
so a public profile route can reuse it directly.

```tsx
import { PublicProfileShell } from "@/components/public-profile-shell";

<PublicProfileShell actor={actor} counts={counts} signInHref="/login" aside={<MutualsCard />}>
  <SocialFeed viewer={undefined} collection={timeline} />
</PublicProfileShell>;
```

### Signed-out follow

`viewer` isn't a prop here — the shell always renders `ProfileHeader` without one, since the visitor
isn't signed in. `onFollow` and `onUnfollow` still fire after the optimistic UI update, so redirect to
`signInHref` from one of them if you want the follow button to gate on sign-in instead of failing
silently.

### Layout

`aside` renders in a `lg:w-80` rail next to `children`; pass `asideFirst` to put it before the main
column, matching a wall-style layout instead of a feed-style one. Omit `aside` for a single-column
page.

---

URL: https://ui.uptoolkit.com/layouts/public-shell.md

Signed-out marketing shell with a top nav, sign-in actions, and a footer around a content slot.

# Public Shell

Signed-out marketing shell with a top nav, sign-in actions, and a footer around a content slot.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/public-shell.json
```

[Registry JSON](https://ui.uptoolkit.com/r/public-shell.json)

## Preview

```tsx
import { PublicShell } from "@/components/public-shell";

export function Preview() {
  return (
    <PublicShell
      nav={[
        { label: "Product", href: "#", active: true },
        { label: "Pricing", href: "#" },
        { label: "Docs", href: "#" },
      ]}
      footerSections={[
        {
          heading: "Product",
          links: [
            { label: "Overview", href: "#" },
            { label: "Pricing", href: "#" },
          ],
        },
        {
          heading: "Company",
          links: [
            { label: "About", href: "#" },
            { label: "Blog", href: "#" },
          ],
        },
      ]}
    >
      <div className="mx-auto flex max-w-5xl flex-col items-start gap-3 px-4 py-16">
        <h1 className="m-0 text-3xl font-semibold tracking-tight">Page content goes here</h1>
        <p className="m-0 max-w-prose text-muted-foreground">
          Marketing and landing page content renders in the shell's content slot.
        </p>
      </div>
    </PublicShell>
  );
}
```

## Source

### components/public-shell.tsx

```tsx
"use client";

import { IconMenu2 } from "@tabler/icons-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

type PublicShellNavItem = {
  label: string;
  href: string;
  /** Marks the current route. The shell does not do routing itself. */
  active?: boolean;
};

type PublicShellFooterSection = {
  heading: string;
  links: readonly { label: string; href: string }[];
};

type PublicShellProps = {
  brand?: { name: string; href?: string };
  nav?: readonly PublicShellNavItem[];
  signInHref?: string;
  signUpHref?: string;
  /** Link columns rendered above the footer note. Omit to skip the grid. */
  footerSections?: readonly PublicShellFooterSection[];
  /** Rendered at the bottom of the footer. Defaults to a rights line. */
  footerNote?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
};

const defaultNav: readonly PublicShellNavItem[] = [
  { label: "Product", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#" },
];

/**
 * Shell for signed-out marketing pages: a header with nav and sign-in/sign-up
 * links, a `children` content slot, and a link-column footer.
 *
 * Nav items and footer links are plain anchors, not a router `Link` — swap
 * them for your router's link component if you need client-side navigation.
 */
function PublicShell({
  brand = { name: "Uptoolkit", href: "#" },
  nav = defaultNav,
  signInHref = "#",
  signUpHref = "#",
  footerSections,
  footerNote,
  children,
  className,
}: PublicShellProps) {
  const [mobileOpen, setMobileOpen] = React.useState(false);

return (
    <div className={cn("flex min-h-svh flex-col", className)}>
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
        <div className="mx-auto flex h-14 max-w-5xl items-center gap-3 px-4">
          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
            <SheetTrigger render={<Button variant="ghost" size="icon" className="md:hidden" />}>
              <IconMenu2 aria-hidden="true" />
              <span className="sr-only">Toggle menu</span>
            </SheetTrigger>
            <SheetContent side="left" className="w-64 p-0">
              <SheetTitle className="sr-only">Navigation</SheetTitle>
              <nav aria-label="Primary" className="flex flex-col gap-1 p-4 pt-12">
                {nav.map((item) => (
                  <a
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileOpen(false)}
                    aria-current={item.active ? "page" : undefined}
                    className={cn(
                      "rounded-md px-3 py-2 text-sm font-medium",
                      item.active
                        ? "bg-secondary text-secondary-foreground"
                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                    )}
                  >
                    {item.label}
                  </a>
                ))}
                <div className="mt-2 flex flex-col gap-2 border-t pt-4">
                  <Button
                    variant="outline"
                    size="sm"
                    nativeButton={false}
                    render={<a href={signInHref} />}
                  >
                    Sign in
                  </Button>
                  <Button size="sm" nativeButton={false} render={<a href={signUpHref} />}>
                    Get started
                  </Button>
                </div>
              </nav>
            </SheetContent>
          </Sheet>

<a
            href={brand.href ?? "#"}
            className="flex shrink-0 items-center gap-2 font-semibold tracking-tight"
          >
            {brand.name}
          </a>

<nav aria-label="Primary" className="hidden items-center gap-1 md:flex">
            {nav.map((item) => (
              <a
                key={item.href}
                href={item.href}
                aria-current={item.active ? "page" : undefined}
                className={cn(
                  "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
                  item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
                )}
              >
                {item.label}
              </a>
            ))}
          </nav>

<div className="ml-auto hidden items-center gap-2 md:flex">
            <Button variant="ghost" size="sm" nativeButton={false} render={<a href={signInHref} />}>
              Sign in
            </Button>
            <Button size="sm" nativeButton={false} render={<a href={signUpHref} />}>
              Get started
            </Button>
          </div>
        </div>
      </header>

<main className="flex-1">{children}</main>

<footer className="border-t">
        <div className="mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10">
          {footerSections && footerSections.length > 0 ? (
            <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
              {footerSections.map((section) => (
                <div key={section.heading} className="flex flex-col gap-2">
                  <span className="text-sm font-medium">{section.heading}</span>
                  <ul className="m-0 flex list-none flex-col gap-2 p-0">
                    {section.links.map((link) => (
                      <li key={link.href}>
                        <a
                          href={link.href}
                          className="text-sm text-muted-foreground hover:text-foreground"
                        >
                          {link.label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          ) : null}

<p className="m-0 text-sm text-muted-foreground">
            {footerNote ?? `${brand.name}. All rights reserved.`}
          </p>
        </div>
      </footer>
    </div>
  );
}

export {
  PublicShell,
  type PublicShellFooterSection,
  type PublicShellNavItem,
  type PublicShellProps,
};
```

## Usage

Header with nav and sign-in/sign-up links, a `children` content slot, and a link-column footer.
Marketing and landing pages install this once and swap `children` per route.

```tsx
import { PublicShell } from "@/components/public-shell";

<PublicShell
  nav={[
    { label: "Product", href: "/product", active: true },
    { label: "Pricing", href: "/pricing" },
  ]}
  signInHref="/login"
  signUpHref="/signup"
  footerSections={[
    { heading: "Product", links: [{ label: "Overview", href: "/product" }] },
  ]}
>
  {children}
</PublicShell>;
```

### Routing

Nav items, the brand link, and footer links are plain anchors, not a router `Link`. Swap the `<a>`
elements for your router's link component if you need client-side navigation, and drive `active`
from the current route.

### Footer

`footerSections` renders as a responsive link grid; omit it to render just the `footerNote` line.
`footerNote` defaults to a generic rights line built from `brand.name` — pass your own to include a
year or legal entity name.

---

URL: https://ui.uptoolkit.com/layouts/settings-shell.md

Sidebar section nav and content pane shell for account settings pages.

# Settings Shell

Sidebar section nav and content pane shell for account settings pages.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/settings-shell.json
```

[Registry JSON](https://ui.uptoolkit.com/r/settings-shell.json)

## Preview

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { SettingsShell } from "@/components/settings-shell";

export function Preview() {
  return (
    <SettingsShell
      description="Manage how you appear, what we send you, and how to leave."
      sections={[
        {
          id: "profile",
          label: "Profile",
          description: "Your name, handle, and how you show up to other people.",
          content: (
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Public profile</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="m-0 text-sm text-muted-foreground">
                  Each section owns its own `content`.
                </p>
              </CardContent>
            </Card>
          ),
        },
        {
          id: "notifications",
          label: "Notifications",
          description: "Choose what we email you about.",
          content: (
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Email preferences</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="m-0 text-sm text-muted-foreground">
                  Switching sections swaps this pane.
                </p>
              </CardContent>
            </Card>
          ),
        },
      ]}
    />
  );
}
```

## Source

### components/settings-shell.tsx

```tsx
"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type SettingsShellSection = {
  id: string;
  label: string;
  description?: string;
  content: React.ReactNode;
};

type SettingsShellProps = {
  sections: readonly SettingsShellSection[];
  /** Controlled active section id. Omit to let the shell manage its own state. */
  activeSection?: string;
  defaultSection?: string;
  onSectionChange?: (id: string) => void;
  title?: string;
  description?: string;
  className?: string;
};

/**
 * Sidebar nav plus content pane for account settings pages.
 *
 * Each section carries its own `content`, so swapping panels means editing
 * the `sections` array instead of branching on the active id yourself.
 * Section state is uncontrolled by default; pass `activeSection` and
 * `onSectionChange` to drive it from a search param instead.
 */
function SettingsShell({
  sections,
  activeSection: controlledSection,
  defaultSection,
  onSectionChange,
  title = "Settings",
  description,
  className,
}: SettingsShellProps) {
  const [uncontrolledSection, setUncontrolledSection] = React.useState(
    defaultSection ?? sections[0]?.id,
  );
  const activeId = controlledSection ?? uncontrolledSection;
  const section = sections.find((entry) => entry.id === activeId) ?? sections[0];

function selectSection(id: string) {
    if (controlledSection === undefined) {
      setUncontrolledSection(id);
    }

onSectionChange?.(id);
  }

return (
    <div className={cn("min-h-svh bg-muted/40", className)}>
      <div className="mx-auto flex max-w-5xl flex-col gap-6 px-4 py-8">
        <header className="flex flex-col gap-2">
          <h1 className="m-0 text-2xl font-semibold tracking-tight">{title}</h1>
          {description ? <p className="m-0 text-sm text-muted-foreground">{description}</p> : null}
        </header>

<div className="flex flex-col gap-6 lg:flex-row">
          <nav aria-label="Settings sections" className="w-full shrink-0 lg:w-56">
            <ul className="m-0 flex list-none gap-1 p-0 lg:flex-col">
              {sections.map((entry) => (
                <li key={entry.id} className="flex-1 lg:flex-none">
                  <Button
                    variant={entry.id === activeId ? "secondary" : "ghost"}
                    size="sm"
                    aria-current={entry.id === activeId ? "page" : undefined}
                    className="w-full justify-start"
                    onClick={() => selectSection(entry.id)}
                  >
                    {entry.label}
                  </Button>
                </li>
              ))}
            </ul>
          </nav>

<div className="flex min-w-0 flex-1 flex-col gap-4">
            {section ? (
              <>
                <div className="flex flex-col gap-1">
                  <h2 className="m-0 text-lg font-semibold tracking-tight">{section.label}</h2>
                  {section.description ? (
                    <p className="m-0 text-sm text-muted-foreground">{section.description}</p>
                  ) : null}
                </div>

{section.content}
              </>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
}

export { SettingsShell, type SettingsShellProps, type SettingsShellSection };
```

## Usage

Sidebar section nav plus a content pane, generalized out of `settings-page`'s inline nav so any
settings route can reuse the same layout with its own forms.

```tsx
import { SettingsShell } from "@/components/settings-shell";

<SettingsShell
  title="Settings"
  description="Manage how you appear, what we send you, and how to leave."
  sections={[
    { id: "profile", label: "Profile", content: <ProfilePanel /> },
    { id: "notifications", label: "Notifications", content: <NotificationsPanel /> },
  ]}
/>;
```

### Section state

Each section owns its `content`, so switching panels is a matter of editing the `sections` array
instead of branching on the active id yourself. State is uncontrolled by default; pass
`activeSection` and `onSectionChange` to move it into a search param so the section survives a
refresh, the same tradeoff [`settings-page`](/pages/settings-page) calls out for its own nav.

---

URL: https://ui.uptoolkit.com/pages.md

Full-page templates you can drop into an app route.

# Pages

Full-page templates you can drop into an app route.

- [Listing Page](https://ui.uptoolkit.com/pages/listing-page): Filterable listing page with search, facets, sorting, and pagination.
- [Profile Page](https://ui.uptoolkit.com/pages/profile-page): User profile page with header, tabbed content, activity timeline, and details sidebar.
- [Settings Page](https://ui.uptoolkit.com/pages/settings-page): Account settings page with section nav, profile, notification, and danger-zone forms.
- [Social Feed Page](https://ui.uptoolkit.com/pages/social-feed-page): Three column social home page composed from feed, suggestions, and notifications.
- [Social Profile Page](https://ui.uptoolkit.com/pages/social-profile-page): Actor profile page with header, timeline, about panel, and followers grid.
- [Wall Page](https://ui.uptoolkit.com/pages/wall-page): Profile wall page with a wall composer, filterable activity feed, and intro, photos, and friends rails.

---

URL: https://ui.uptoolkit.com/pages/listing-page.md

Filterable listing page with search, facets, sorting, and pagination.

# Listing Page

Filterable listing page with search, facets, sorting, and pagination.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/listing-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/listing-page.json)

## Preview

```tsx
import Page from "app/listings/page";

export function Preview() {
  return <Page />;
}
```

## Source

### page.tsx

```tsx
import { Button } from "@/components/ui/button";

import { ListingBrowser } from "@/components/listing-browser";
import { sampleListings } from "@/lib/listing-data";

/**
 * Listing page shell.
 *
 * The page itself stays a server component: it renders the heading and hands
 * the records to `ListingBrowser`, which owns the search, facet, sort, and
 * pagination state on the client. Replace `sampleListings` with your own query.
 */
export default function Page() {
  const listings = sampleListings;

return (
    <main className="min-h-svh bg-muted/40">
      <div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 py-8">
        <header className="flex flex-wrap items-end justify-between gap-4">
          <div className="flex flex-col gap-1">
            <h1 className="m-0 text-2xl font-semibold tracking-tight">Listings</h1>
            <p className="m-0 text-sm text-muted-foreground">
              Browse {listings.length} tools. Filter by category and location, then sort the
              results.
            </p>
          </div>
          <Button>Submit a listing</Button>
        </header>

<ListingBrowser listings={listings} />
      </div>
    </main>
  );
}
```

### components/listing-browser.tsx

```tsx
"use client";

import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";

import {
  filterListings,
  formatListingPrice,
  getListingFacets,
  listingSortOptions,
  sortListings,
  type Listing,
  type ListingSort,
} from "@/lib/listing-data";

type ListingBrowserProps = {
  listings: readonly Listing[];
  /** Results per page. */
  pageSize?: number;
};

/**
 * Client half of the listing page: search, facets, sorting, and pagination all
 * run against the `listings` prop, so the server component above can fetch
 * however it likes and stay a server component.
 */
function ListingBrowser({ listings, pageSize = 4 }: ListingBrowserProps) {
  const [query, setQuery] = React.useState("");
  const [categories, setCategories] = React.useState<string[]>([]);
  const [locations, setLocations] = React.useState<string[]>([]);
  const [sort, setSort] = React.useState<ListingSort>("relevance");
  const [page, setPage] = React.useState(1);

const categoryFacets = React.useMemo(() => getListingFacets(listings, "category"), [listings]);
  const locationFacets = React.useMemo(() => getListingFacets(listings, "location"), [listings]);

const results = React.useMemo(
    () => sortListings(filterListings(listings, { query, categories, locations }), sort),
    [listings, query, categories, locations, sort],
  );

const pageCount = Math.max(1, Math.ceil(results.length / pageSize));
  // Filters can shrink the result set below the active page; clamp instead of
  // resetting so the visible page never goes blank.
  const currentPage = Math.min(page, pageCount);
  const visibleResults = results.slice((currentPage - 1) * pageSize, currentPage * pageSize);
  const activeFilterCount = categories.length + locations.length + (query.trim() ? 1 : 0);

function toggleFacet(
    value: string,
    selected: string[],
    setSelected: React.Dispatch<React.SetStateAction<string[]>>,
  ) {
    setPage(1);
    setSelected(
      selected.includes(value) ? selected.filter((entry) => entry !== value) : [...selected, value],
    );
  }

function clearFilters() {
    setQuery("");
    setCategories([]);
    setLocations([]);
    setPage(1);
  }

return (
    <div className="flex flex-col gap-6 lg:flex-row">
      <aside className="w-full shrink-0 lg:w-64">
        <Card className="gap-4 py-4">
          <CardHeader className="flex-row items-center justify-between">
            <CardTitle className="text-base">Filters</CardTitle>
            {activeFilterCount > 0 ? (
              <Button variant="ghost" size="xs" onClick={clearFilters}>
                Clear
              </Button>
            ) : null}
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="listing-search">Search</Label>
              <Input
                id="listing-search"
                value={query}
                placeholder="Search listings..."
                onChange={(event) => {
                  setQuery(event.target.value);
                  setPage(1);
                }}
              />
            </div>

<FacetGroup
              legend="Category"
              facets={categoryFacets}
              selected={categories}
              onToggle={(value) => toggleFacet(value, categories, setCategories)}
            />

<FacetGroup
              legend="Location"
              facets={locationFacets}
              selected={locations}
              onToggle={(value) => toggleFacet(value, locations, setLocations)}
            />
          </CardContent>
        </Card>
      </aside>

<div className="flex min-w-0 flex-1 flex-col gap-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <p className="m-0 text-sm text-muted-foreground">
            {results.length} {results.length === 1 ? "result" : "results"}
          </p>
          <div className="flex flex-wrap items-center gap-1">
            {listingSortOptions.map((option) => (
              <Button
                key={option.value}
                variant={sort === option.value ? "secondary" : "ghost"}
                size="sm"
                aria-pressed={sort === option.value}
                onClick={() => {
                  setSort(option.value);
                  setPage(1);
                }}
              >
                {option.label}
              </Button>
            ))}
          </div>
        </div>

{visibleResults.length === 0 ? (
          <Card className="items-center py-12 text-center">
            <CardContent className="flex flex-col items-center gap-2">
              <p className="m-0 text-sm font-medium">No listings match those filters</p>
              <p className="m-0 text-sm text-muted-foreground">
                Try a broader search or clear a facet.
              </p>
              <Button variant="outline" size="sm" className="mt-2" onClick={clearFilters}>
                Clear filters
              </Button>
            </CardContent>
          </Card>
        ) : (
          <ul className="m-0 grid list-none gap-4 p-0 md:grid-cols-2">
            {visibleResults.map((listing) => (
              <li key={listing.id}>
                <ListingCard listing={listing} />
              </li>
            ))}
          </ul>
        )}

<Pagination page={currentPage} pageCount={pageCount} onPageChange={setPage} />
      </div>
    </div>
  );
}

return (
          <Button
            key={facet.value}
            variant={isSelected ? "secondary" : "ghost"}
            size="sm"
            aria-pressed={isSelected}
            className="justify-between"
            onClick={() => onToggle(facet.value)}
          >
            <span>{facet.value}</span>
            <span className="text-muted-foreground">{facet.count}</span>
          </Button>
        );
      })}
    </fieldset>
  );
}

function ListingCard({ listing }: { listing: Listing }) {
  return (
    <Card className="h-full gap-3">
      <CardHeader>
        <div className="flex items-start justify-between gap-2">
          <CardTitle className="text-base">{listing.title}</CardTitle>
          {listing.featured ? <Badge variant="secondary">Featured</Badge> : null}
        </div>
        <CardDescription>{listing.summary}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
        <Badge variant="outline">{listing.category}</Badge>
        <span>{listing.location}</span>
        <span aria-hidden>·</span>
        <span>{listing.rating.toFixed(1)} ★</span>
        <span aria-hidden>·</span>
        <span className="font-medium text-foreground">{formatListingPrice(listing.price)}</span>
        <span className="ml-auto text-xs">Updated {listing.updatedAt}</span>
      </CardContent>
    </Card>
  );
}

export { ListingBrowser, type ListingBrowserProps };
```

### lib/listing-data.ts

```ts
/** A single row in the listing. Swap this for your own record shape. */
export type Listing = {
  id: string;
  title: string;
  summary: string;
  category: string;
  location: string;
  price: number;
  rating: number;
  updatedAt: string;
  featured?: boolean;
};

export type ListingSort = "relevance" | "price-asc" | "price-desc" | "rating";

export const listingSortOptions = [
  { value: "relevance", label: "Most relevant" },
  { value: "price-asc", label: "Price: low to high" },
  { value: "price-desc", label: "Price: high to low" },
  { value: "rating", label: "Top rated" },
] as const satisfies readonly { value: ListingSort; label: string }[];

export const sampleListings: readonly Listing[] = [
  {
    id: "atlas-analytics",
    title: "Atlas Analytics",
    summary: "Self-hosted product analytics with a warehouse-native event model.",
    category: "Analytics",
    location: "Remote",
    price: 49,
    rating: 4.8,
    updatedAt: "2 days ago",
    featured: true,
  },
  {
    id: "beacon-status",
    title: "Beacon Status",
    summary: "Status pages and incident timelines that stay up when you do not.",
    category: "Monitoring",
    location: "Berlin",
    price: 19,
    rating: 4.5,
    updatedAt: "5 days ago",
  },
  {
    id: "cadence-scheduler",
    title: "Cadence Scheduler",
    summary: "Cron jobs with retries, backfills, and an audit trail per run.",
    category: "Infrastructure",
    location: "Remote",
    price: 0,
    rating: 4.2,
    updatedAt: "1 week ago",
  },
  {
    id: "drift-cms",
    title: "Drift CMS",
    summary: "Git-backed content modeling with typed queries and previews.",
    category: "Content",
    location: "Lisbon",
    price: 79,
    rating: 4.6,
    updatedAt: "1 week ago",
    featured: true,
  },
  {
    id: "ember-mail",
    title: "Ember Mail",
    summary: "Transactional email templates you can render and test locally.",
    category: "Content",
    location: "Remote",
    price: 29,
    rating: 4.1,
    updatedAt: "2 weeks ago",
  },
  {
    id: "flux-queue",
    title: "Flux Queue",
    summary: "A durable job queue with exactly-once delivery semantics.",
    category: "Infrastructure",
    location: "Toronto",
    price: 39,
    rating: 4.7,
    updatedAt: "3 weeks ago",
  },
  {
    id: "grid-insights",
    title: "Grid Insights",
    summary: "Dashboards that compile to static charts at build time.",
    category: "Analytics",
    location: "Remote",
    price: 0,
    rating: 3.9,
    updatedAt: "1 month ago",
  },
  {
    id: "halo-uptime",
    title: "Halo Uptime",
    summary: "Synthetic checks from twelve regions with alert deduplication.",
    category: "Monitoring",
    location: "Sydney",
    price: 25,
    rating: 4.4,
    updatedAt: "1 month ago",
  },
  {
    id: "ion-search",
    title: "Ion Search",
    summary: "Typo-tolerant search that indexes straight from your database.",
    category: "Infrastructure",
    location: "Remote",
    price: 59,
    rating: 4.9,
    updatedAt: "2 months ago",
  },
];

/** Distinct facet values with counts, derived from the listings themselves. */
export function getListingFacets(
  listings: readonly Listing[],
  key: "category" | "location",
): { value: string; count: number }[] {
  const counts = new Map<string, number>();

for (const listing of listings) {
    counts.set(listing[key], (counts.get(listing[key]) ?? 0) + 1);
  }

return Array.from(counts, ([value, count]) => ({ value, count })).toSorted((a, b) =>
    a.value.localeCompare(b.value),
  );
}

export function filterListings(
  listings: readonly Listing[],
  { query, categories, locations }: { query: string; categories: string[]; locations: string[] },
): Listing[] {
  const normalizedQuery = query.trim().toLowerCase();

return listings.filter((listing) => {
    const matchesQuery =
      normalizedQuery.length === 0 ||
      `${listing.title} ${listing.summary}`.toLowerCase().includes(normalizedQuery);
    const matchesCategory = categories.length === 0 || categories.includes(listing.category);
    const matchesLocation = locations.length === 0 || locations.includes(listing.location);

return matchesQuery && matchesCategory && matchesLocation;
  });
}

const listingComparators = {
  relevance: (a: Listing, b: Listing) => Number(b.featured ?? false) - Number(a.featured ?? false),
  "price-asc": (a: Listing, b: Listing) => a.price - b.price,
  "price-desc": (a: Listing, b: Listing) => b.price - a.price,
  rating: (a: Listing, b: Listing) => b.rating - a.rating,
} as const satisfies Record<ListingSort, (a: Listing, b: Listing) => number>;

export function sortListings(listings: readonly Listing[], sort: ListingSort): Listing[] {
  return [...listings].toSorted(listingComparators[sort]);
}

export function formatListingPrice(price: number): string {
  return price === 0 ? "Free" : `$${price}/mo`;
}
```

## Usage

A results page split the way most listing pages want to be split: the route stays a server
component and only the interactive shell is a client component.

```sh
npx shadcn@latest add @_cn/listing-page
```

Installs `app/listings/page.tsx` plus the `ListingBrowser` client component and the `listing-data`
helpers.

### Wiring it to real data

`page.tsx` passes an array of `Listing` records down; everything else is derived. Fetch in the
server component and the client shell keeps working unchanged:

```tsx
import { ListingBrowser } from "@/components/listing-browser";

export default async function Page() {
  const listings = await db.listing.findMany({ where: { published: true } });

return <ListingBrowser listings={listings} pageSize={12} />;
}
```

### Facets

`getListingFacets` derives the facet values and their counts from the listings themselves, so a new
category shows up in the sidebar without a second source of truth. Filtering, sorting, and price
formatting live in `listing-data.ts` as pure functions, which keeps them testable and lets you move
any of them server-side once the result set outgrows the client.

### Pagination

Paging is clamped rather than reset: narrowing the filters while on page 3 lands you on the last
page that still has results instead of an empty one.

---

URL: https://ui.uptoolkit.com/pages/profile-page.md

User profile page with header, tabbed content, activity timeline, and details sidebar.

# Profile Page

User profile page with header, tabbed content, activity timeline, and details sidebar.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/profile-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/profile-page.json)

## Preview

```tsx
import Page from "app/profile/page";

export function Preview() {
  return <Page />;
}
```

## Source

### page.tsx

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import {
  getActivityKindLabel,
  sampleActivity,
  sampleProfile,
  sampleProjects,
  type Profile,
  type ProfileActivity,
  type ProfileProject,
} from "@/lib/profile-data";

/**
 * User profile page.
 *
 * A header with the identity and stats, tabbed content for activity and
 * projects, and a details sidebar. Everything reads from one `Profile` record,
 * so swapping `sampleProfile` for a real lookup is the only change needed.
 */
export default function Page() {
  const profile = sampleProfile;

return (
    <main className="min-h-svh bg-muted/40">
      <div className="mx-auto flex max-w-5xl flex-col gap-6 px-4 py-8">
        <ProfileHeaderCard profile={profile} />

<div className="flex flex-col gap-6 lg:flex-row">
          <div className="min-w-0 flex-1">
            <Tabs defaultValue="activity" className="gap-4">
              <TabsList variant="line" className="w-full justify-start">
                <TabsTrigger value="activity">Activity</TabsTrigger>
                <TabsTrigger value="projects">Projects</TabsTrigger>
                <TabsTrigger value="about">About</TabsTrigger>
              </TabsList>

<TabsContent value="about">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">About {profile.name}</CardTitle>
                  </CardHeader>
                  <CardContent className="flex flex-col gap-4">
                    <p className="m-0 text-sm leading-relaxed text-muted-foreground">
                      {profile.bio}
                    </p>
                    <Separator />
                    <div className="flex flex-wrap gap-1.5">
                      {profile.skills.map((skill) => (
                        <Badge key={skill} variant="secondary">
                          {skill}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>

<aside className="flex w-full shrink-0 flex-col gap-4 lg:w-72">
            <DetailsCard profile={profile} />
          </aside>
        </div>
      </div>
    </main>
  );
}

function ProfileHeaderCard({ profile }: { profile: Profile }) {
  return (
    <Card className="gap-0 overflow-hidden py-0">
      <div className="h-28 bg-gradient-to-r from-primary/20 via-primary/10 to-transparent" />
      <CardContent className="flex flex-col gap-4 px-4 pt-0 pb-4 sm:px-6 sm:pb-6">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div className="flex items-end gap-4">
            <Avatar className="-mt-10 size-20 border-4 border-background">
              <AvatarImage src={profile.avatarUrl} alt="" />
              <AvatarFallback>{profile.initials}</AvatarFallback>
            </Avatar>
            <div className="flex flex-col gap-0.5 pb-1">
              <h1 className="m-0 text-xl font-semibold tracking-tight">{profile.name}</h1>
              <p className="m-0 text-sm text-muted-foreground">
                @{profile.handle} · {profile.pronouns}
              </p>
            </div>
          </div>

<div className="flex items-center gap-2 pb-1">
            <Button variant="outline" size="sm">
              Message
            </Button>
            <Button size="sm">Follow</Button>
          </div>
        </div>

<p className="m-0 max-w-2xl text-sm text-muted-foreground">{profile.headline}</p>

<dl className="m-0 flex flex-wrap gap-6">
          {profile.stats.map((stat) => (
            <div key={stat.label} className="flex items-baseline gap-1.5">
              <dt className="order-2 text-sm text-muted-foreground">{stat.label}</dt>
              <dd className="order-1 m-0 text-sm font-semibold">{stat.value}</dd>
            </div>
          ))}
        </dl>
      </CardContent>
    </Card>
  );
}

function ActivityTimeline({ activity }: { activity: readonly ProfileActivity[] }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Recent activity</CardTitle>
        <CardDescription>The last few things that happened.</CardDescription>
      </CardHeader>
      <CardContent>
        <ol className="m-0 flex list-none flex-col gap-0 p-0">
          {activity.map((entry, index) => (
            <li key={entry.id} className="flex gap-3">
              <div className="flex flex-col items-center">
                <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
                {index < activity.length - 1 ? (
                  <span className="w-px flex-1 bg-border" aria-hidden />
                ) : null}
              </div>
              <div className="flex flex-col gap-1 pb-5">
                <div className="flex flex-wrap items-center gap-2">
                  <Badge variant="outline">{getActivityKindLabel(entry.kind)}</Badge>
                  <span className="text-sm font-medium">{entry.title}</span>
                  <span className="text-xs text-muted-foreground">{entry.timestamp}</span>
                </div>
                <p className="m-0 text-sm text-muted-foreground">{entry.detail}</p>
              </div>
            </li>
          ))}
        </ol>
      </CardContent>
    </Card>
  );
}

function ProjectList({ projects }: { projects: readonly ProfileProject[] }) {
  return (
    <ul className="m-0 grid list-none gap-4 p-0 sm:grid-cols-2">
      {projects.map((project) => (
        <li key={project.id}>
          <Card className="h-full gap-2">
            <CardHeader>
              <div className="flex items-start justify-between gap-2">
                <CardTitle className="text-base">{project.name}</CardTitle>
                <Badge variant={project.status === "Active" ? "secondary" : "outline"}>
                  {project.status}
                </Badge>
              </div>
              <CardDescription>{project.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="m-0 text-sm text-muted-foreground">{project.role}</p>
            </CardContent>
          </Card>
        </li>
      ))}
    </ul>
  );
}

function DetailsCard({ profile }: { profile: Profile }) {
  const details = [
    { label: "Location", value: profile.location },
    { label: "Website", value: profile.website },
    { label: "Joined", value: profile.joinedAt },
  ];

return (
    <Card className="gap-3 py-4">
      <CardHeader>
        <CardTitle className="text-base">Details</CardTitle>
      </CardHeader>
      <CardContent>
        <dl className="m-0 flex flex-col gap-3">
          {details.map((detail) => (
            <div key={detail.label} className="flex flex-col gap-0.5">
              <dt className="text-xs text-muted-foreground">{detail.label}</dt>
              <dd className="m-0 text-sm">{detail.value}</dd>
            </div>
          ))}
        </dl>
      </CardContent>
    </Card>
  );
}
```

### lib/profile-data.ts

```ts
/** The person the profile page is about. */
export type Profile = {
  name: string;
  handle: string;
  headline: string;
  bio: string;
  avatarUrl: string;
  initials: string;
  location: string;
  joinedAt: string;
  website: string;
  pronouns: string;
  skills: readonly string[];
  stats: readonly ProfileStat[];
};

export type ProfileStat = {
  label: string;
  value: string;
};

export type ProfileActivity = {
  id: string;
  title: string;
  detail: string;
  timestamp: string;
  kind: "shipped" | "wrote" | "spoke" | "joined";
};

export type ProfileProject = {
  id: string;
  name: string;
  description: string;
  role: string;
  status: "Active" | "Archived";
};

export const sampleProfile: Profile = {
  name: "Rowan Ellis",
  handle: "rowan",
  headline: "Design engineer, building tools for other builders",
  bio: "I work on the seam between design systems and the runtime that renders them. Mostly TypeScript, occasionally Rust, always too many browser tabs.",
  avatarUrl: "https://github.com/shadcn.png",
  initials: "RE",
  location: "Copenhagen, DK",
  joinedAt: "March 2021",
  website: "rowan.example.com",
  pronouns: "they/them",
  skills: ["Design systems", "TypeScript", "Accessibility", "Rust", "Prototyping"],
  stats: [
    { label: "Projects", value: "18" },
    { label: "Followers", value: "2.4k" },
    { label: "Following", value: "312" },
  ],
};

export const sampleActivity: readonly ProfileActivity[] = [
  {
    id: "activity-1",
    title: "Shipped tokens v4",
    detail: "Migrated every color token to OKLCH and dropped the legacy palette.",
    timestamp: "2 days ago",
    kind: "shipped",
  },
  {
    id: "activity-2",
    title: "Wrote “Stop nesting your primitives”",
    detail: "A short case against three-deep component wrappers in design systems.",
    timestamp: "1 week ago",
    kind: "wrote",
  },
  {
    id: "activity-3",
    title: "Spoke at NordicJS",
    detail: "Thirty minutes on rendering strategies and the cost of hydration.",
    timestamp: "3 weeks ago",
    kind: "spoke",
  },
  {
    id: "activity-4",
    title: "Joined the accessibility working group",
    detail: "Helping review component RFCs against WCAG 2.2.",
    timestamp: "2 months ago",
    kind: "joined",
  },
];

export const sampleProjects: readonly ProfileProject[] = [
  {
    id: "project-1",
    name: "Palette",
    description: "A perceptual color scale generator with contrast guardrails built in.",
    role: "Maintainer",
    status: "Active",
  },
  {
    id: "project-2",
    name: "Runlist",
    description: "Task runner that reads your package scripts and renders them as a TUI.",
    role: "Contributor",
    status: "Active",
  },
  {
    id: "project-3",
    name: "Slate",
    description: "An early static site generator, kept online for the people still using it.",
    role: "Maintainer",
    status: "Archived",
  },
];

const activityKindLabels = {
  shipped: "Shipped",
  wrote: "Wrote",
  spoke: "Spoke",
  joined: "Joined",
} as const satisfies Record<ProfileActivity["kind"], string>;

export function getActivityKindLabel(kind: ProfileActivity["kind"]): string {
  return activityKindLabels[kind];
}
```

## Usage

A profile with a cover header, identity and stats, three content tabs, and a details sidebar. It
stays a server component — nothing on the page needs client state except the tabs primitive itself.

```sh
npx shadcn@latest add @_cn/profile-page
```

Installs `app/profile/page.tsx` and the `profile-data` fixtures.

### Wiring it to a real user

Move the page to a dynamic segment and resolve the profile from the route:

```tsx
export default async function Page({ params }: { params: Promise<{ handle: string }> }) {
  const { handle } = await params;
  const profile = await db.profile.findUniqueOrThrow({ where: { handle } });

// ...pass profile, activity, and projects into the same sections
}
```

Every section reads from the one `Profile` record plus two lists, so the only thing to replace is
the three `sample*` exports in `profile-data.ts`.

### Notes

Stats render as a `<dl>` with the value ordered before the label visually but after it in source, so
screen readers announce "Projects, 18" while sighted users read the number first. The activity
timeline is an ordered list with the connector line drawn as a sibling element, which keeps the list
semantics intact.

For a federated, ActivityPub-flavored take on the same page, see
[`social-profile-page`](/pages/social-profile-page).

---

URL: https://ui.uptoolkit.com/pages/settings-page.md

Account settings page with section nav, profile, notification, and danger-zone forms.

# Settings Page

Account settings page with section nav, profile, notification, and danger-zone forms.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/settings-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/settings-page.json)

## Preview

```tsx
import Page from "app/settings/page";

export function Preview() {
  return <Page />;
}
```

## Source

### page.tsx

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

import { sampleSettingsProfile } from "@/lib/settings-data";
import { SettingsPanels } from "@/components/settings-panels";

/**
 * Account settings page.
 *
 * The route stays a server component and loads the account record; the section
 * nav and the forms live in `SettingsPanels` on the client. Replace
 * `sampleSettingsProfile` with your own session lookup.
 */
export default function Page() {
  const profile = sampleSettingsProfile;

return (
    <main className="min-h-svh bg-muted/40">
      <div className="mx-auto flex max-w-5xl flex-col gap-6 px-4 py-8">
        <header className="flex flex-col gap-2">
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="#">Account</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Settings</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <h1 className="m-0 text-2xl font-semibold tracking-tight">Settings</h1>
          <p className="m-0 text-sm text-muted-foreground">
            Manage how you appear, what we send you, and how to leave.
          </p>
        </header>

<SettingsPanels profile={profile} />
      </div>
    </main>
  );
}
```

### components/settings-panels.tsx

```tsx
"use client";

import * as React from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";

import {
  defaultNotificationPreferences,
  settingsSections,
  type NotificationPreference,
  type SettingsProfile,
  type SettingsSectionId,
} from "@/lib/settings-data";

type SettingsPanelsProps = {
  profile: SettingsProfile;
  notifications?: readonly NotificationPreference[];
};

/**
 * Client half of the settings page: the section nav, the forms, and their local
 * state. Swap the `onSubmit` handlers for server actions and the layout is
 * unchanged.
 */
function SettingsPanels({
  profile,
  notifications = defaultNotificationPreferences,
}: SettingsPanelsProps) {
  const [activeSection, setActiveSection] = React.useState<SettingsSectionId>("profile");
  const section = settingsSections.find((entry) => entry.id === activeSection);

return (
    <div className="flex flex-col gap-6 lg:flex-row">
      <nav aria-label="Settings sections" className="w-full shrink-0 lg:w-56">
        <ul className="m-0 flex list-none gap-1 p-0 lg:flex-col">
          {settingsSections.map((entry) => (
            <li key={entry.id} className="flex-1 lg:flex-none">
              <Button
                variant={entry.id === activeSection ? "secondary" : "ghost"}
                size="sm"
                aria-current={entry.id === activeSection ? "page" : undefined}
                className="w-full justify-start"
                onClick={() => setActiveSection(entry.id)}
              >
                {entry.label}
              </Button>
            </li>
          ))}
        </ul>
      </nav>

<div className="flex min-w-0 flex-1 flex-col gap-4">
        {section ? (
          <div className="flex flex-col gap-1">
            <h2 className="m-0 text-lg font-semibold tracking-tight">{section.label}</h2>
            <p className="m-0 text-sm text-muted-foreground">{section.description}</p>
          </div>
        ) : null}

{activeSection === "profile" ? <ProfilePanel profile={profile} /> : null}
        {activeSection === "notifications" ? (
          <NotificationsPanel preferences={notifications} />
        ) : null}
        {activeSection === "danger" ? <DangerPanel handle={profile.handle} /> : null}
      </div>
    </div>
  );
}

function ProfilePanel({ profile }: { profile: SettingsProfile }) {
  const [saved, setSaved] = React.useState(false);

return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        setSaved(true);
      }}
    >
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Public profile</CardTitle>
          <CardDescription>This is what other people see.</CardDescription>
        </CardHeader>

<CardContent className="flex flex-col gap-5">
          <div className="flex items-center gap-4">
            <Avatar className="size-14">
              <AvatarImage src={profile.avatarUrl} alt="" />
              <AvatarFallback>{profile.initials}</AvatarFallback>
            </Avatar>
            <div className="flex flex-col gap-2">
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium">{profile.name}</span>
                <Badge variant="secondary">{profile.plan}</Badge>
              </div>
              <div className="flex gap-2">
                <Button type="button" variant="outline" size="xs">
                  Upload
                </Button>
                <Button type="button" variant="ghost" size="xs">
                  Remove
                </Button>
              </div>
            </div>
          </div>

<div className="grid gap-4 sm:grid-cols-2">
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="settings-name">Name</Label>
              <Input id="settings-name" name="name" defaultValue={profile.name} />
            </div>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="settings-handle">Handle</Label>
              <Input id="settings-handle" name="handle" defaultValue={profile.handle} />
            </div>
          </div>

<div className="flex flex-col gap-1.5">
            <Label htmlFor="settings-email">Email</Label>
            <Input
              id="settings-email"
              name="email"
              type="email"
              defaultValue={profile.email}
              aria-describedby="settings-email-hint"
            />
            <p id="settings-email-hint" className="m-0 text-xs text-muted-foreground">
              Changing this sends a confirmation link to the new address.
            </p>
          </div>

<CardFooter className="justify-between gap-3 border-t">
          <p className="m-0 text-sm text-muted-foreground" role="status">
            {saved ? "Saved." : " "}
          </p>
          <div className="flex gap-2">
            <Button type="reset" variant="ghost" size="sm" onClick={() => setSaved(false)}>
              Reset
            </Button>
            <Button type="submit" size="sm">
              Save changes
            </Button>
          </div>
        </CardFooter>
      </Card>
    </form>
  );
}

function NotificationsPanel({ preferences }: { preferences: readonly NotificationPreference[] }) {
  const [enabled, setEnabled] = React.useState(
    () => new Set(preferences.filter((entry) => entry.enabled).map((entry) => entry.id)),
  );

function toggle(id: string) {
    setEnabled((current) => {
      const next = new Set(current);

if (!next.delete(id)) {
        next.add(id);
      }

return next;
    });
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Email preferences</CardTitle>
        <CardDescription>Security alerts cannot be fully disabled.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-0">
        {preferences.map((preference, index) => (
          <React.Fragment key={preference.id}>
            {index > 0 ? <Separator className="my-3" /> : null}
            <div className="flex items-start justify-between gap-4">
              <div className="flex flex-col gap-0.5">
                <span className="text-sm font-medium">{preference.label}</span>
                <span className="text-sm text-muted-foreground">{preference.description}</span>
              </div>
              <Button
                variant={enabled.has(preference.id) ? "secondary" : "outline"}
                size="sm"
                role="switch"
                aria-checked={enabled.has(preference.id)}
                onClick={() => toggle(preference.id)}
              >
                {enabled.has(preference.id) ? "On" : "Off"}
              </Button>
            </div>
          </React.Fragment>
        ))}
      </CardContent>
    </Card>
  );
}

function DangerPanel({ handle }: { handle: string }) {
  const [confirmation, setConfirmation] = React.useState("");
  const canDelete = confirmation === handle;

return (
    <Card className="border-destructive/40">
      <CardHeader>
        <CardTitle className="text-base text-destructive">Delete account</CardTitle>
        <CardDescription>
          This removes your profile, projects, and history. It cannot be undone.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-1.5">
        <Label htmlFor="settings-confirm">
          Type <span className="font-mono">{handle}</span> to confirm
        </Label>
        <Input
          id="settings-confirm"
          value={confirmation}
          autoComplete="off"
          placeholder={handle}
          onChange={(event) => setConfirmation(event.target.value)}
        />
      </CardContent>
      <CardFooter className="justify-end border-t">
        <Button variant="destructive" size="sm" disabled={!canDelete}>
          Delete this account
        </Button>
      </CardFooter>
    </Card>
  );
}

export { SettingsPanels, type SettingsPanelsProps };
```

### lib/settings-data.ts

```ts
export type SettingsSectionId = "profile" | "notifications" | "danger";

export type SettingsSection = {
  id: SettingsSectionId;
  label: string;
  description: string;
};

export type NotificationPreference = {
  id: string;
  label: string;
  description: string;
  enabled: boolean;
};

export type SettingsProfile = {
  name: string;
  handle: string;
  email: string;
  bio: string;
  avatarUrl: string;
  initials: string;
  plan: string;
};

export const settingsSections: readonly SettingsSection[] = [
  {
    id: "profile",
    label: "Profile",
    description: "Your name, handle, and how you show up to other people.",
  },
  {
    id: "notifications",
    label: "Notifications",
    description: "Choose what we email you about.",
  },
  {
    id: "danger",
    label: "Danger zone",
    description: "Irreversible account actions.",
  },
];

export const sampleSettingsProfile: SettingsProfile = {
  name: "Rowan Ellis",
  handle: "rowan",
  email: "rowan@example.com",
  bio: "Design engineer working on tools for other builders.",
  avatarUrl: "https://github.com/shadcn.png",
  initials: "RE",
  plan: "Pro",
};

export const defaultNotificationPreferences: readonly NotificationPreference[] = [
  {
    id: "product-updates",
    label: "Product updates",
    description: "New features and meaningful changes. Roughly monthly.",
    enabled: true,
  },
  {
    id: "security-alerts",
    label: "Security alerts",
    description: "New sign-ins and credential changes. Always worth reading.",
    enabled: true,
  },
  {
    id: "weekly-digest",
    label: "Weekly digest",
    description: "A summary of activity across your workspaces.",
    enabled: false,
  },
  {
    id: "marketing",
    label: "Offers and research",
    description: "Occasional surveys and pricing experiments.",
    enabled: false,
  },
];
```

## Usage

Three settings panels behind a section nav: the public profile form, email preferences, and a
danger zone that makes you type your handle before the delete button turns on.

```sh
npx shadcn@latest add @_cn/settings-page
```

Installs `app/settings/page.tsx` plus the `SettingsPanels` client component and the `settings-data`
defaults.

### Saving

`ProfilePanel` submits a real `<form>`, so swapping the local handler for a server action is a
one-line change and the form keeps working without JavaScript:

```tsx
<form action={updateProfile}>{/* same fields */}</form>
```

Notification toggles are `role="switch"` buttons with `aria-checked`, which keeps them announced
correctly without pulling in a switch primitive.

### Section nav

`settingsSections` in `settings-data.ts` drives both the nav and the heading above each panel, so
adding a section means adding one entry and one branch in `SettingsPanels`. For a nav that survives
a refresh, move `activeSection` into a search param instead of `useState`.

---

URL: https://ui.uptoolkit.com/pages/social-feed-page.md

Three column social home page composed from feed, suggestions, and notifications.

# Social Feed Page

Three column social home page composed from feed, suggestions, and notifications.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/social-feed-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/social-feed-page.json)

## Preview

```tsx
import Page from "app/feed/page";

export function Preview() {
  return <Page />;
}
```

## Source

### page.tsx

```tsx
import {
  IconBookmark,
  IconCalendarEvent,
  IconHome,
  IconUsersGroup,
  IconWorld,
} from "@tabler/icons-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

import { ActorGrid } from "@/components/actor-grid";
import { NotificationsPanel } from "@/components/notifications-panel";
import { SocialFeed } from "@/components/social-feed";
import { ActorAvatar } from "@/components/ui/actor-avatar";
import { JsonLd } from "@/components/json-ld";
import { getActorHandle } from "@/lib/activitypub";
import { toPersonJsonLd } from "@/lib/schema-org";
import {
  SAMPLE_NOW,
  sampleCounts,
  sampleFeed,
  sampleFollowers,
  sampleInbox,
  sampleSuggestions,
  sampleViewer,
} from "@/lib/social-sample-data";

const shortcuts = [
  { label: "Home", icon: IconHome, href: "/feed" },
  { label: "Friends", icon: IconUsersGroup, href: "/friends" },
  { label: "Explore", icon: IconWorld, href: "/explore" },
  { label: "Saved", icon: IconBookmark, href: "/saved" },
  { label: "Events", icon: IconCalendarEvent, href: "/events" },
];

/**
 * Social home page.
 *
 * Three columns: navigation, the timeline, and a rail of suggestions and
 * notifications. The feed, grid, and panel are client components; this page
 * stays a server component and only passes data down, so swap the sample
 * fixtures for your own `inbox` fetch here.
 */
export default function Page() {
  const viewerJsonLd = toPersonJsonLd(sampleViewer, { counts: sampleCounts.viewer });

return (
    <div className="min-h-svh bg-muted/40">
      <JsonLd data={viewerJsonLd} />

<div className="mx-auto flex max-w-7xl gap-6 px-4 py-6">
        <aside
          aria-label="Shortcuts"
          className="sticky top-6 hidden h-fit w-60 shrink-0 flex-col gap-4 lg:flex"
        >
          <a
            href={sampleViewer.url ?? sampleViewer.id}
            className="flex items-center gap-3 rounded-lg p-2 hover:bg-accent"
          >
            <ActorAvatar actor={sampleViewer} size="lg" presence="online" />
            <span className="flex min-w-0 flex-col">
              <span className="truncate font-semibold">{sampleViewer.name}</span>
              <span className="truncate text-xs text-muted-foreground">
                {getActorHandle(sampleViewer)}
              </span>
            </span>
          </a>

<nav aria-label="Primary">
            <ul className="m-0 flex list-none flex-col gap-1 p-0">
              {shortcuts.map((shortcut) => (
                <li key={shortcut.label}>
                  <a
                    href={shortcut.href}
                    className="flex items-center gap-3 rounded-lg p-2 text-sm font-medium hover:bg-accent"
                  >
                    <shortcut.icon aria-hidden="true" className="size-5 text-muted-foreground" />
                    {shortcut.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>

<Card className="gap-3 py-4">
            <CardHeader>
              <CardTitle className="text-base">People you may know</CardTitle>
            </CardHeader>
            <CardContent>
              <ActorGrid
                actors={sampleSuggestions}
                heading="Suggestions"
                variant="row"
                columns={1}
                includeJsonLd={false}
                className="gap-2 [&>div:first-child]:hidden"
              />
            </CardContent>
          </Card>
        </aside>
      </div>
    </div>
  );
}
```

## Usage

The social home page, assembled from the blocks in this registry: shortcuts and contacts on the left,
the timeline in the middle, notifications and suggestions on the right. Columns collapse at `lg` and
`xl`, leaving the timeline alone on small screens.

```sh
npx shadcn@latest add @_cn/social-feed-page
```

Installs to `app/feed/page.tsx` along with every block, component, and helper it uses.

### Wiring it up

The page is a server component; the interactive blocks inside it are client components. Replace the
sample fixtures with your own fetches and pass the results down — nothing else needs to change:

```tsx
export default async function Page() {
  const viewer = await getSignedInActor();
  const [feed, inbox, contacts, suggestions] = await Promise.all([
    fetchInbox(viewer),
    fetchNotifications(viewer),
    fetchFollowing(viewer),
    fetchSuggestions(viewer),
  ]);

// ...pass each into SocialFeed, NotificationsPanel, and ActorGrid
}
```

Once the data is real, drop the `now={SAMPLE_NOW}` props so timestamps come from the clock, and
delete [`social-sample-data`](/utilities/social-sample-data).

### Structured data

The page emits a Schema.org `Person` node for the signed-in actor, and the feed inside emits its own
`CollectionPage`. Each post additionally carries `SocialMediaPosting` microdata.

---

URL: https://ui.uptoolkit.com/pages/social-profile-page.md

Actor profile page with header, timeline, about panel, and followers grid.

# Social Profile Page

Actor profile page with header, timeline, about panel, and followers grid.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/social-profile-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/social-profile-page.json)

## Preview

```tsx
import Page from "app/profile/page";

export function Preview() {
  return <Page />;
}
```

## Source

### page.tsx

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { ActorGrid } from "@/components/actor-grid";
import { ProfileHeader } from "@/components/profile-header";
import { SocialFeed } from "@/components/social-feed";
import { ActorAvatarGroup } from "@/components/ui/actor-avatar";
import { JsonLd } from "@/components/json-ld";
import { toProfilePageJsonLd } from "@/lib/schema-org";
import {
  SAMPLE_NOW,
  buildCreateActivity,
  sampleAuthor,
  sampleCounts,
  sampleFollowers,
  sampleTimeline,
  sampleViewer,
} from "@/lib/social-sample-data";

/**
 * Actor profile page.
 *
 * The header, timeline, and followers grid all read the same `ActivityPubActor`,
 * and the page emits one Schema.org `ProfilePage` node whose `mainEntity` is the
 * actor and whose `hasPart` lists the visible posts. Replace the sample
 * fixtures with a WebFinger lookup plus an `outbox` fetch.
 */
export default function Page() {
  const actor = sampleAuthor;
  const posts = sampleTimeline.filter(
    (post) => typeof post.attributedTo !== "string" && post.attributedTo.id === actor.id,
  );
  const timeline = posts.map((post) => buildCreateActivity(post));
  const mutuals = sampleFollowers.filter((follower) => follower.id !== actor.id);

return (
    <div className="min-h-svh bg-muted/40">
      <JsonLd data={toProfilePageJsonLd(actor, { counts: sampleCounts.author, posts })} />

<aside className="flex w-full shrink-0 flex-col gap-4 lg:w-80">
            <Card className="gap-3 py-4">
              <CardHeader>
                <CardTitle className="text-base">Mutual contacts</CardTitle>
              </CardHeader>
              <CardContent className="flex flex-col gap-3">
                <ActorAvatarGroup actors={mutuals} total={sampleCounts.author.followers} max={5} />
                <p className="m-0 text-sm text-muted-foreground">
                  {mutuals.length} people you follow also follow {actor.name}.
                </p>
              </CardContent>
            </Card>

<ActorGrid
              actors={mutuals}
              heading="Followers"
              variant="row"
              columns={1}
              initialCount={4}
              searchable
              includeJsonLd={false}
            />
          </aside>
        </div>
      </div>
    </div>
  );
}
```

## Usage

An actor's profile: header with cover and stats, their timeline, mutual contacts, and a followers
grid. Every block reads the same `ActivityPubActor`, so there is one source of truth on the page.

```sh
npx shadcn@latest add @_cn/social-profile-page
```

Installs to `app/profile/page.tsx`. Move it to a dynamic segment such as
`app/[handle]/page.tsx` and resolve the actor from the route:

```tsx
import { buildWebFingerUrl, parseHandle } from "@/lib/activitypub";

export default async function Page({ params }: { params: Promise<{ handle: string }> }) {
  const { handle } = await params;
  const actor = await resolveActorByHandle(handle); // WebFinger, then fetch the actor document
  const outbox = await fetchOutbox(actor);

// ...pass actor and outbox into ProfileHeader, SocialFeed, and ActorGrid
}
```

`parseHandle` and `buildWebFingerUrl` from [`activitypub`](/utilities/activitypub) cover the
discovery half of that lookup.

### Structured data

The page emits one Schema.org `ProfilePage` whose `mainEntity` is the actor and whose `hasPart` lists
the visible posts. The header's own JSON-LD is switched off with `includeJsonLd={false}`, and the
followers grid does the same, so the page produces a single profile node instead of three
overlapping ones.

---

URL: https://ui.uptoolkit.com/pages/wall-page.md

Profile wall page with a wall composer, filterable activity feed, and intro, photos, and friends rails.

# Wall Page

Profile wall page with a wall composer, filterable activity feed, and intro, photos, and friends rails.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/wall-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/wall-page.json)

## Preview

```tsx
import Page from "app/wall/page";

export function Preview() {
  return <Page />;
}
```

## Source

### page.tsx

```tsx
import { IconCake, IconMapPin, IconPhoto } from "@tabler/icons-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

import { ActorGrid } from "@/components/actor-grid";
import { ProfileHeader } from "@/components/profile-header";
import { sampleWallCollection, toWallEntries } from "@/lib/wall-activities";
import { WallFeed } from "@/components/wall-feed";
import { ActorAvatarGroup } from "@/components/ui/actor-avatar";
import { JsonLd } from "@/components/json-ld";
import {
  formatCompactNumber,
  getActorDisplayName,
  getCollectionItems,
  toPlainText,
} from "@/lib/activitypub";
import { toProfilePageJsonLd } from "@/lib/schema-org";
import {
  SAMPLE_NOW,
  sampleAuthor,
  sampleCounts,
  sampleFollowers,
  sampleViewer,
} from "@/lib/social-sample-data";

/**
 * Profile wall page.
 *
 * The header, the activity feed, and the rails all read the same
 * `ActivityPubActor`, and the page emits one Schema.org `ProfilePage` whose
 * `hasPart` lists the visible posts. Replace the fixtures with a WebFinger
 * lookup plus an `outbox` fetch.
 */
export default function Page() {
  const owner = sampleAuthor;
  const viewer = sampleViewer;
  const counts = sampleCounts.author;
  const friends = sampleFollowers.filter((actor) => actor.id !== owner.id);
  const entries = toWallEntries(getCollectionItems(sampleWallCollection), owner);

// The rail derives its thumbnails from the wall's own attachments, so the two
  // can never disagree about what has been posted. Reaction entries point at a
  // post that is already in the stream, so the same image arrives more than
  // once — dedupe by URL rather than showing it twice in the grid.
  const photos = [
    ...new Map(
      entries
        .flatMap((entry) => entry.object?.attachment ?? [])
        .filter((file) => file.type === "Image")
        .map((file) => [file.url, file]),
    ).values(),
  ];

const posts = entries.flatMap((entry) =>
    entry.kind === "post" && entry.object ? [entry.object] : [],
  );

return (
    <div className="min-h-svh bg-muted/40">
      <JsonLd data={toProfilePageJsonLd(owner, { counts, posts })} />

<main className="min-w-0 flex-1">
            <WallFeed
              owner={owner}
              viewer={viewer}
              collection={sampleWallCollection}
              showComments
              now={SAMPLE_NOW}
              className="max-w-none"
            />
          </main>
        </div>
      </div>
    </div>
  );
}

function IntroCard({
  owner,
  counts,
}: {
  owner: typeof sampleAuthor;
  counts: { posts: number; followers: number; following: number };
}) {
  const fields = owner.attachment ?? [];

return (
    <Card className="gap-3 py-4">
      <CardHeader>
        <CardTitle className="text-base">Intro</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <p className="m-0 text-sm text-muted-foreground">{toPlainText(owner.summary)}</p>

<dl className="m-0 flex flex-col gap-2 text-sm">
          {fields.map((field) => (
            <div key={field.name} className="flex items-center gap-2">
              <IconMapPin aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
              <dt className="sr-only">{field.name}</dt>
              <dd className="m-0 truncate">{field.value}</dd>
            </div>
          ))}
          <div className="flex items-center gap-2">
            <IconCake aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
            <dt className="sr-only">Posts</dt>
            <dd className="m-0">{formatCompactNumber(counts.posts)} posts</dd>
          </div>
        </dl>
      </CardContent>
    </Card>
  );
}

function PhotosCard({ photos }: { photos: readonly { url: string; name?: string | null }[] }) {
  if (photos.length === 0) {
    return null;
  }

return (
    <Card className="gap-3 py-4">
      <CardHeader className="flex-row items-center justify-between">
        <CardTitle className="flex items-center gap-2 text-base">
          <IconPhoto aria-hidden="true" className="size-4" />
          Photos
        </CardTitle>
        <Button variant="ghost" size="xs">
          See all
        </Button>
      </CardHeader>
      <CardContent>
        <ul className="m-0 grid list-none grid-cols-3 gap-1.5 p-0">
          {photos.slice(0, 9).map((photo) => (
            <li key={photo.url} className="overflow-hidden rounded-md border">
              <img
                src={photo.url}
                alt={photo.name ?? ""}
                loading="lazy"
                className="aspect-square size-full object-cover"
              />
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}

function FriendsCard({
  friends,
  total,
}: {
  friends: readonly (typeof sampleFollowers)[number][];
  total: number;
}) {
  return (
    <>
      <Card className="gap-3 py-4">
        <CardHeader>
          <CardTitle className="text-base">Friends</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <ActorAvatarGroup actors={friends} total={total} max={5} />
          <p className="m-0 text-sm text-muted-foreground">
            {formatCompactNumber(total)} people follow {getActorDisplayName(friends[0])} and{" "}
            {friends.length - 1} others you know.
          </p>
        </CardContent>
      </Card>

<ActorGrid
        actors={friends}
        heading="People you may know"
        variant="row"
        columns={1}
        initialCount={4}
        includeJsonLd={false}
      />
    </>
  );
}
```

## Usage

Someone's wall: the header, a composer for visitors, and the full activity stream — their posts,
other people's wall posts, reactions, follows, albums, and profile changes — with an intro, photos,
and friends rail alongside.

```sh
npx shadcn@latest add @_cn/wall-page
```

Installs to `app/wall/page.tsx` along with [`wall-feed`](/blocks/wall-feed) and every block,
component, and helper it uses.

### Wiring it to a real actor

Move the page to a dynamic segment and resolve the owner from the route:

```tsx
import { buildWebFingerUrl, parseHandle } from "@/lib/activitypub";

export default async function Page({ params }: { params: Promise<{ handle: string }> }) {
  const { handle } = await params;
  const owner = await resolveActorByHandle(handle); // WebFinger, then fetch the actor document
  const [outbox, friends] = await Promise.all([fetchOutbox(owner), fetchFollowers(owner)]);

// ...pass owner, outbox, and friends into ProfileHeader, WallFeed, and ActorGrid
}
```

`parseHandle` and `buildWebFingerUrl` from [`activitypub`](/utilities/activitypub) cover the
discovery half of that lookup. Once the data is real, drop the `now={SAMPLE_NOW}` prop so timestamps
come from the clock.

### The photos rail

The rail does not take its own list. It derives the thumbnails from the attachments already present
in the wall collection, so the rail and the stream can never disagree about what has been posted.

### Structured data

The page emits one Schema.org `ProfilePage` whose `mainEntity` is the owner and whose `hasPart`
lists the visible posts. The header's own JSON-LD is switched off with `includeJsonLd={false}`, and
the friends grid does the same, so the page produces a single profile node rather than three
overlapping ones. The feed still emits its own `CollectionPage`.

### Related

[`social-profile-page`](/pages/social-profile-page) is the timeline-only version of this page: same
actor, same header, but a plain post feed instead of the full activity vocabulary.

---

URL: https://ui.uptoolkit.com/utilities.md

Hooks, libraries, files, themes, fonts, bases, styles, and other items.

# Utilities

Hooks, libraries, files, themes, fonts, bases, styles, and other items.

- [ActivityPub](https://ui.uptoolkit.com/utilities/activitypub): ActivityStreams 2.0 types and helpers for building federated social features.
- [Schema.org JSON-LD](https://ui.uptoolkit.com/utilities/schema-org): Maps ActivityPub actors, objects, and activities to Schema.org JSON-LD.
- [Social Sample Data](https://ui.uptoolkit.com/utilities/social-sample-data): Sample ActivityPub actors, notes, and inbox activities for previewing social UI.
- [useCopyToClipboard](https://ui.uptoolkit.com/utilities/use-copy-to-clipboard): A small hook that copies text and tracks the latest copy result.

---

URL: https://ui.uptoolkit.com/utilities/activitypub.md

ActivityStreams 2.0 types and helpers for building federated social features.

# ActivityPub

ActivityStreams 2.0 types and helpers for building federated social features.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/activitypub.json
```

[Registry JSON](https://ui.uptoolkit.com/r/activitypub.json)

## Preview

```tsx
import { sampleViewer } from "@/lib/social-sample-data";
import {
  buildAudience,
  buildWebFingerUrl,
  createNoteActivity,
  getActorHandle,
  getVisibility,
} from "@/lib/activitypub";

const activity = createNoteActivity({
  actor: sampleViewer,
  content: "Hello, fediverse.",
  visibility: "followers",
  published: "2025-06-12T14:00:00.000Z",
  id: "https://social.example/users/ada/activities/create/demo",
  objectId: "https://social.example/users/ada/posts/demo",
});

const rows = [
  ["Handle", getActorHandle(sampleViewer)],
  ["WebFinger", buildWebFingerUrl(getActorHandle(sampleViewer)) ?? "-"],
  ["Audience", JSON.stringify(buildAudience({ visibility: "public", actor: sampleViewer }))],
  ["Visibility", getVisibility(activity.object).visibility],
];

export function Preview() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-3 text-left">
      <dl className="m-0 grid gap-1 text-sm">
        {rows.map(([label, value]) => (
          <div key={label} className="flex flex-wrap gap-x-2 border-b py-1">
            <dt className="w-24 shrink-0 text-muted-foreground">{label}</dt>
            <dd className="m-0 min-w-0 font-mono text-xs break-all">{value}</dd>
          </div>
        ))}
      </dl>
      <pre className="m-0 max-h-64 overflow-auto rounded-md bg-muted p-3 text-xs">
        {JSON.stringify(activity, null, 2)}
      </pre>
    </div>
  );
}
```

## Source

### lib/activitypub.ts

```ts
/**
 * Minimal, dependency-free ActivityStreams 2.0 / ActivityPub vocabulary.
 *
 * Types follow the W3C ActivityStreams 2.0 core and extended vocabularies so the
 * same objects can be served from a federated `outbox` and rendered by the UI.
 *
 * @see https://www.w3.org/TR/activitystreams-vocabulary/
 * @see https://www.w3.org/TR/activitypub/
 */

const ACTIVITY_STREAMS_CONTEXT = "https://www.w3.org/ns/activitystreams";
const PUBLIC_AUDIENCE = "https://www.w3.org/ns/activitystreams#Public";
const SECURITY_CONTEXT = "https://w3id.org/security/v1";

/**
 * Default locale for every formatter in this file.
 *
 * `Intl` with an implicit locale resolves to the host locale, which differs
 * between a server and a visitor's browser and shows up as a hydration
 * mismatch. Formatting is deterministic unless a caller opts in to a locale.
 */
const DEFAULT_LOCALE = "en";

type JsonLdContext = string | readonly (string | Record<string, unknown>)[];

type ActorType = "Person" | "Group" | "Organization" | "Service" | "Application";

type CollectionType =
  | "Collection"
  | "OrderedCollection"
  | "CollectionPage"
  | "OrderedCollectionPage";

/** Audience shorthand mapped onto `to`/`cc` by {@link buildAudience}. */
type ActivityPubVisibility = "public" | "unlisted" | "followers" | "direct";

type ActivityPubLink = {
  type: "Link";
  href: string;
  name?: string;
  mediaType?: string;
  rel?: string | readonly string[];
};

type ActivityPubDocument = {
  type: "Document" | "Image" | "Video" | "Audio";
  url: string;
  /** Alt text. ActivityStreams uses `name` for human-readable labels. */
  name?: string | null;
  mediaType?: string;
  width?: number;
  height?: number;
  blurhash?: string;
  duration?: string;
};

/** Profile metadata fields, rendered as key/value rows by profile UIs. */
type ActivityPubPropertyValue = {
  type: "PropertyValue";
  name: string;
  value: string;
  /** Non-standard Mastodon extension set when a rel="me" link is verified. */
  verifiedAt?: string | null;
};

type ActivityPubTag =
  | { type: "Hashtag"; name: string; href?: string }
  | { type: "Mention"; name: string; href: string }
  | { type: "Emoji"; name: string; icon: ActivityPubDocument; id?: string };

type ActivityPubPlace = {
  type: "Place";
  name: string;
  latitude?: number;
  longitude?: number;
  radius?: number;
  units?: string;
};

type ActivityPubActor = {
  "@context"?: JsonLdContext;
  id: string;
  type: ActorType;
  /** Local part of the WebFinger `acct:` URI. */
  preferredUsername: string;
  name?: string;
  /** HTML summary, as served by ActivityPub implementations. */
  summary?: string;
  url?: string;
  icon?: ActivityPubDocument;
  /** Header/cover artwork. */
  image?: ActivityPubDocument;
  inbox?: string;
  outbox?: string;
  followers?: string;
  following?: string;
  liked?: string;
  published?: string;
  /** `true` when follows create a pending request instead of a follow. */
  manuallyApprovesFollowers?: boolean;
  discoverable?: boolean;
  attachment?: readonly ActivityPubPropertyValue[];
  tag?: readonly ActivityPubTag[];
  publicKey?: {
    id: string;
    owner: string;
    publicKeyPem: string;
  };
};

type ActivityPubObject = {
  "@context"?: JsonLdContext;
  id: string;
  type: ObjectType;
  attributedTo: string | ActivityPubActor;
  /** HTML content. Render through a sanitizer or {@link toPlainText}. */
  content?: string;
  contentMap?: Record<string, string>;
  /** Title, used by `Article` and `Page`. */
  name?: string;
  /** Content warning. Paired with `sensitive`. */
  summary?: string;
  sensitive?: boolean;
  url?: string;
  published?: string;
  updated?: string;
  inReplyTo?: string | null;
  to?: readonly string[];
  cc?: readonly string[];
  audience?: readonly string[];
  attachment?: readonly ActivityPubDocument[];
  tag?: readonly ActivityPubTag[];
  location?: ActivityPubPlace;
  replies?: ActivityPubCollection<ActivityPubObject>;
  likes?: ActivityPubCollection<ActivityPubActivity>;
  shares?: ActivityPubCollection<ActivityPubActivity>;
  inLanguage?: string;
};

type ActivityPubActivity<TObject = ActivityPubObject | string> = {
  "@context"?: JsonLdContext;
  id: string;
  type: ActivityType;
  actor: string | ActivityPubActor;
  object: TObject;
  target?: string | ActivityPubObject;
  /** Custom emoji or unicode shortcode for `Like`/`EmojiReact`. */
  content?: string;
  published?: string;
  to?: readonly string[];
  cc?: readonly string[];
};

type ActivityPubCollection<TItem> = {
  "@context"?: JsonLdContext;
  id?: string;
  type: CollectionType;
  totalItems?: number;
  items?: readonly TItem[];
  orderedItems?: readonly TItem[];
  first?: string | ActivityPubCollection<TItem>;
  last?: string;
  next?: string;
  prev?: string;
  partOf?: string;
};

type WebFingerHandle = {
  username: string;
  domain: string;
};

const htmlEntities: Record<string, string> = {
  amp: "&",
  lt: "<",
  gt: ">",
  quot: '"',
  apos: "'",
  nbsp: " ",
  "#39": "'",
  "#x27": "'",
};

/** Reads `id` from either a bare IRI reference or an inlined object. */
function getObjectId(value: string | { id?: string } | null | undefined): string | undefined {
  if (typeof value === "string") {
    return value;
  }

return value?.id;
}

/** Returns the inlined actor, or `undefined` when only an IRI is present. */
function resolveActor(
  value: string | ActivityPubActor | null | undefined,
): ActivityPubActor | undefined {
  return typeof value === "string" || !value ? undefined : value;
}

/** Returns the inlined object, or `undefined` when only an IRI is present. */
function resolveObject(
  value: string | ActivityPubObject | null | undefined,
): ActivityPubObject | undefined {
  return typeof value === "string" || !value ? undefined : value;
}

function getActorDomain(actor: ActivityPubActor): string | undefined {
  for (const candidate of [actor.url, actor.id]) {
    if (!candidate) {
      continue;
    }

try {
      return new URL(candidate).host;
    } catch {
      continue;
    }
  }

return undefined;
}

/** Builds the fediverse handle, for example `@ada@social.example`. */
function getActorHandle(actor: ActivityPubActor): string {
  const domain = getActorDomain(actor);

return domain ? `@${actor.preferredUsername}@${domain}` : `@${actor.preferredUsername}`;
}

/** Builds the WebFinger `acct:` URI used as a stable Schema.org identifier. */
function getActorAcctUri(actor: ActivityPubActor): string {
  return `acct:${getActorHandle(actor).slice(1)}`;
}

function getActorDisplayName(actor: ActivityPubActor): string {
  return actor.name?.trim() || actor.preferredUsername;
}

/** Up to two uppercase letters for avatar fallbacks. */
function getActorInitials(actor: ActivityPubActor): string {
  const words = getActorDisplayName(actor)
    .split(/[\s._-]+/u)
    .filter(Boolean);
  const initials = words.slice(0, 2).map((word) => Array.from(word)[0] ?? "");

return initials.join("").toUpperCase() || "?";
}

function parseHandle(handle: string): WebFingerHandle | undefined {
  const match = /^@?([^@\s/]+)@([^@\s/]+)$/u.exec(handle.trim());

if (!match) {
    return undefined;
  }

return { username: match[1], domain: match[2].toLowerCase() };
}

/** Builds the WebFinger discovery URL for `@user@domain`. */
function buildWebFingerUrl(handle: string): string | undefined {
  const parsed = parseHandle(handle);

if (!parsed) {
    return undefined;
  }

const resource = encodeURIComponent(`acct:${parsed.username}@${parsed.domain}`);

return `https://${parsed.domain}/.well-known/webfinger?resource=${resource}`;
}

/** Strips tags and decodes the common entities found in federated HTML. */
function toPlainText(html: string | undefined): string {
  if (!html) {
    return "";
  }

return html
    .replace(/<br\s*\/?>/giu, "\n")
    .replace(/<\/p>\s*<p[^>]*>/giu, "\n\n")
    .replace(/<[^>]+>/gu, "")
    .replace(/&(#x?[0-9a-f]+|[a-z]+);/giu, (match, entity: string) => {
      const key = entity.toLowerCase();
      const named = htmlEntities[key];

if (named) {
        return named;
      }

const codePoint = key.startsWith("#x")
        ? Number.parseInt(key.slice(2), 16)
        : key.startsWith("#")
          ? Number.parseInt(key.slice(1), 10)
          : Number.NaN;

return Number.isFinite(codePoint) ? String.fromCodePoint(codePoint) : match;
    })
    .replace(/[ \t]+\n/gu, "\n")
    .trim();
}

/** Plain-text body split into paragraphs, ready to render without HTML. */
function getObjectParagraphs(object: ActivityPubObject): string[] {
  return toPlainText(object.content)
    .split(/\n{2,}/u)
    .map((paragraph) => paragraph.trim())
    .filter(Boolean);
}

function isPublicAudience(audience: readonly string[] | undefined): boolean {
  return Boolean(audience?.includes(PUBLIC_AUDIENCE));
}

/**
 * Derives the Mastodon-style visibility from `to`/`cc`.
 *
 * - `public`: Public in `to`
 * - `unlisted`: Public in `cc` only
 * - `followers`: addressed to the followers collection
 * - `direct`: everything else
 */
function getVisibility(object: Pick<ActivityPubObject, "to" | "cc" | "attributedTo">): {
  visibility: ActivityPubVisibility;
} {
  if (isPublicAudience(object.to)) {
    return { visibility: "public" };
  }

if (isPublicAudience(object.cc)) {
    return { visibility: "unlisted" };
  }

const followers = resolveActor(object.attributedTo)?.followers;
  const addressed = [...(object.to ?? []), ...(object.cc ?? [])];

if (followers && addressed.includes(followers)) {
    return { visibility: "followers" };
  }

return { visibility: "direct" };
}

/** Inverse of {@link getVisibility}: turns a visibility into `to`/`cc`. */
function buildAudience(options: {
  visibility: ActivityPubVisibility;
  actor: ActivityPubActor;
  mentions?: readonly string[];
}): { to: string[]; cc: string[] } {
  const followers = options.actor.followers ?? `${options.actor.id}/followers`;
  const mentions = [...new Set(options.mentions ?? [])];

switch (options.visibility) {
    case "public":
      return { to: [PUBLIC_AUDIENCE], cc: [followers, ...mentions] };
    case "unlisted":
      return { to: [followers], cc: [PUBLIC_AUDIENCE, ...mentions] };
    case "followers":
      return { to: [followers], cc: mentions };
    case "direct":
    default:
      return { to: mentions, cc: [] };
  }
}

function getCollectionItems<TItem>(
  collection: ActivityPubCollection<TItem> | readonly TItem[] | undefined,
): readonly TItem[] {
  if (!collection) {
    return [];
  }

if (!("type" in collection)) {
    return collection;
  }

return collection.orderedItems ?? collection.items ?? [];
}

/** Prefers `totalItems` so paginated collections still report a full count. */
function getCollectionCount<TItem>(
  collection: ActivityPubCollection<TItem> | readonly TItem[] | undefined,
): number {
  if (!collection) {
    return 0;
  }

if ("type" in collection && typeof collection.totalItems === "number") {
    return collection.totalItems;
  }

return getCollectionItems(collection).length;
}

function getTags<TType extends ActivityPubTag["type"]>(
  object: Pick<ActivityPubObject, "tag">,
  type: TType,
): Extract<ActivityPubTag, { type: TType }>[] {
  return (object.tag ?? []).filter(
    (tag): tag is Extract<ActivityPubTag, { type: TType }> => tag.type === type,
  );
}

const relativeTimeUnits: readonly [Intl.RelativeTimeFormatUnit, number][] = [
  ["year", 365 * 24 * 60 * 60 * 1000],
  ["month", 30 * 24 * 60 * 60 * 1000],
  ["week", 7 * 24 * 60 * 60 * 1000],
  ["day", 24 * 60 * 60 * 1000],
  ["hour", 60 * 60 * 1000],
  ["minute", 60 * 1000],
];

/**
 * Formats an ActivityStreams `published` timestamp as relative time.
 *
 * Pass `now` explicitly on the server to keep output deterministic between
 * server and client renders.
 */
function formatPublishedTime(
  published: string | undefined,
  options: { now?: Date | number; locale?: string } = {},
): string {
  if (!published) {
    return "";
  }

const timestamp = Date.parse(published);

if (Number.isNaN(timestamp)) {
    return "";
  }

const now = options.now instanceof Date ? options.now.getTime() : (options.now ?? Date.now());
  const elapsed = timestamp - now;
  const magnitude = Math.abs(elapsed);
  const formatter = new Intl.RelativeTimeFormat(options.locale ?? DEFAULT_LOCALE, {
    numeric: "auto",
  });

for (const [unit, duration] of relativeTimeUnits) {
    if (magnitude >= duration) {
      return formatter.format(Math.round(elapsed / duration), unit);
    }
  }

return formatter.format(Math.round(elapsed / 1000), "second");
}

function formatCompactNumber(value: number, locale: string = DEFAULT_LOCALE): string {
  return new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(
    value,
  );
}

/**
 * Formats an ActivityStreams timestamp as an absolute date, for "Joined March
 * 2021" style labels. Returns `undefined` for a missing or unparseable value.
 */
function formatPublishedDate(
  published: string | undefined,
  options: { locale?: string; dateStyle?: Intl.DateTimeFormatOptions } = {},
): string | undefined {
  if (!published) {
    return undefined;
  }

const timestamp = Date.parse(published);

if (Number.isNaN(timestamp)) {
    return undefined;
  }

return new Intl.DateTimeFormat(
    options.locale ?? DEFAULT_LOCALE,
    options.dateStyle ?? { month: "long", year: "numeric" },
  ).format(timestamp);
}

function createActivityId(actor: ActivityPubActor, type: ActivityType, seed?: string): string {
  const suffix = seed ?? `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;

return `${actor.id}/activities/${type.toLowerCase()}/${suffix}`;
}

/** Wraps a new `Note` in the `Create` activity an outbox would deliver. */
function createNoteActivity(options: {
  actor: ActivityPubActor;
  content: string;
  visibility?: ActivityPubVisibility;
  summary?: string;
  sensitive?: boolean;
  inReplyTo?: string | null;
  attachment?: readonly ActivityPubDocument[];
  tag?: readonly ActivityPubTag[];
  published?: string;
  id?: string;
  objectId?: string;
}): ActivityPubActivity<ActivityPubObject> {
  const published = options.published ?? new Date().toISOString();
  const mentions = (options.tag ?? [])
    .filter((tag): tag is Extract<ActivityPubTag, { type: "Mention" }> => tag.type === "Mention")
    .map((tag) => tag.href);
  const audience = buildAudience({
    visibility: options.visibility ?? "public",
    actor: options.actor,
    mentions,
  });
  const objectId = options.objectId ?? `${options.actor.id}/posts/${Date.parse(published)}`;

const object: ActivityPubObject = {
    id: objectId,
    type: "Note",
    attributedTo: options.actor,
    content: options.content,
    published,
    to: audience.to,
    cc: audience.cc,
    ...(options.summary ? { summary: options.summary } : {}),
    ...(options.sensitive ? { sensitive: true } : {}),
    ...(options.inReplyTo ? { inReplyTo: options.inReplyTo } : {}),
    ...(options.attachment?.length ? { attachment: options.attachment } : {}),
    ...(options.tag?.length ? { tag: options.tag } : {}),
  };

return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: options.id ?? createActivityId(options.actor, "Create", String(Date.parse(published))),
    type: "Create",
    actor: options.actor,
    object,
    published,
    to: audience.to,
    cc: audience.cc,
  };
}

/** `Like`, or `EmojiReact` when `content` carries an emoji reaction. */
function createLikeActivity(options: {
  actor: ActivityPubActor;
  object: string | ActivityPubObject;
  content?: string;
  published?: string;
  id?: string;
}): ActivityPubActivity {
  const published = options.published ?? new Date().toISOString();

return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: options.id ?? createActivityId(options.actor, options.content ? "EmojiReact" : "Like"),
    type: options.content ? "EmojiReact" : "Like",
    actor: options.actor,
    object: getObjectId(options.object) ?? options.object,
    published,
    ...(options.content ? { content: options.content } : {}),
  };
}

/** `Announce` is the fediverse equivalent of a share or boost. */
function createAnnounceActivity(options: {
  actor: ActivityPubActor;
  object: string | ActivityPubObject;
  visibility?: ActivityPubVisibility;
  published?: string;
  id?: string;
}): ActivityPubActivity {
  const published = options.published ?? new Date().toISOString();
  const audience = buildAudience({
    visibility: options.visibility ?? "public",
    actor: options.actor,
  });

return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: options.id ?? createActivityId(options.actor, "Announce"),
    type: "Announce",
    actor: options.actor,
    object: getObjectId(options.object) ?? options.object,
    published,
    to: audience.to,
    cc: audience.cc,
  };
}

function createFollowActivity(options: {
  actor: ActivityPubActor;
  object: string | ActivityPubActor;
  published?: string;
  id?: string;
}): ActivityPubActivity<string> {
  const target = getObjectId(options.object);

return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: options.id ?? createActivityId(options.actor, "Follow"),
    type: "Follow",
    actor: options.actor,
    object: target ?? "",
    published: options.published ?? new Date().toISOString(),
    to: target ? [target] : [],
  };
}

/** Wraps a previously delivered activity so it can be retracted. */
function createUndoActivity<TObject>(options: {
  actor: ActivityPubActor;
  activity: ActivityPubActivity<TObject>;
  published?: string;
  id?: string;
}): ActivityPubActivity<ActivityPubActivity<TObject>> {
  return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: options.id ?? createActivityId(options.actor, "Undo"),
    type: "Undo",
    actor: options.actor,
    object: options.activity,
    published: options.published ?? new Date().toISOString(),
    ...(options.activity.to ? { to: options.activity.to } : {}),
  };
}

/** Unwraps `Announce` and `Create` so UIs can render the underlying object. */
function getActivityObject(
  activity: ActivityPubActivity | ActivityPubObject,
): ActivityPubObject | undefined {
  if (!("actor" in activity)) {
    return activity;
  }

return resolveObject(activity.object);
}

export {
  ACTIVITY_STREAMS_CONTEXT,
  DEFAULT_LOCALE,
  PUBLIC_AUDIENCE,
  SECURITY_CONTEXT,
  buildAudience,
  buildWebFingerUrl,
  createAnnounceActivity,
  createFollowActivity,
  createLikeActivity,
  createNoteActivity,
  createUndoActivity,
  formatCompactNumber,
  formatPublishedDate,
  formatPublishedTime,
  getActivityObject,
  getActorAcctUri,
  getActorDisplayName,
  getActorDomain,
  getActorHandle,
  getActorInitials,
  getCollectionCount,
  getCollectionItems,
  getObjectId,
  getObjectParagraphs,
  getTags,
  getVisibility,
  isPublicAudience,
  parseHandle,
  resolveActor,
  resolveObject,
  toPlainText,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
  type ActivityPubDocument,
  type ActivityPubLink,
  type ActivityPubObject,
  type ActivityPubPlace,
  type ActivityPubPropertyValue,
  type ActivityPubTag,
  type ActivityPubVisibility,
  type ActivityType,
  type ActorType,
  type CollectionType,
  type JsonLdContext,
  type ObjectType,
  type WebFingerHandle,
};
```

## Usage

The data contract every other social item in this registry reads. It models the
[ActivityStreams 2.0](https://www.w3.org/TR/activitystreams-vocabulary/) vocabulary that
[ActivityPub](https://www.w3.org/TR/activitypub/) servers actually serve, so objects you fetch from
an `outbox` or `inbox` can be handed straight to the components with no adapter layer.

No dependencies, no runtime schema validation, no network calls.

### Types

`ActivityPubActor`, `ActivityPubObject`, `ActivityPubActivity`, `ActivityPubCollection`,
`ActivityPubDocument`, `ActivityPubTag`, `ActivityPubPropertyValue`, and `ActivityPubPlace`.

### Identity

```ts
import { buildWebFingerUrl, getActorAcctUri, getActorHandle } from "@/lib/activitypub";

getActorHandle(actor); // "@mira@fediverse.example"
getActorAcctUri(actor); // "acct:mira@fediverse.example"
buildWebFingerUrl("@mira@fediverse.example");
// "https://fediverse.example/.well-known/webfinger?resource=acct%3Amira%40fediverse.example"
```

### Audience and visibility

Mastodon-style visibility is not a field in ActivityStreams: it is derived from `to` and `cc`.
`getVisibility` reads it, `buildAudience` writes it.

```ts
import { buildAudience, getVisibility } from "@/lib/activitypub";

getVisibility(note); // { visibility: "public" | "unlisted" | "followers" | "direct" }
buildAudience({ visibility: "followers", actor, mentions: [otherActor.id] });
// { to: ["https://social.example/users/ada/followers"], cc: ["https://..."] }
```

### Building activities

Each helper returns a complete activity, ready to `POST` to the actor's outbox.

```ts
import {
  createAnnounceActivity,
  createFollowActivity,
  createLikeActivity,
  createNoteActivity,
  createUndoActivity,
} from "@/lib/activitypub";

### Reading

`getCollectionItems` and `getCollectionCount` normalise `items` / `orderedItems` / `totalItems`.
`getActivityObject` unwraps `Create` and `Announce`. `toPlainText` strips the HTML that federated
`content` arrives as, and `getObjectParagraphs` splits it into renderable paragraphs.

### Formatting

`formatPublishedTime`, `formatPublishedDate`, and `formatCompactNumber` default to the `en` locale
rather than the host locale, because `Intl` with an implicit locale resolves differently on a server
and in a visitor's browser and surfaces as a hydration mismatch. Pass `locale` to opt in to
something else — the same value on both sides.

```ts
formatPublishedTime(note.published, { now: renderedAt, locale: "fr" }); // "il y a 3 heures"
formatPublishedDate(actor.published, { locale: "fr" }); // "juillet 2019"
formatCompactNumber(18_940); // "19K"
```

> Pass a fixed `now` when rendering on the server for the same reason. A relative timestamp computed
> from `Date.now()` on both sides of a render will not agree.

---

URL: https://ui.uptoolkit.com/utilities/schema-org.md

Maps ActivityPub actors, objects, and activities to Schema.org JSON-LD.

# Schema.org JSON-LD

Maps ActivityPub actors, objects, and activities to Schema.org JSON-LD.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/schema-org.json
```

[Registry JSON](https://ui.uptoolkit.com/r/schema-org.json)

## Preview

```tsx
import { sampleCounts, samplePost, sampleViewer } from "@/lib/social-sample-data";
import { toPersonJsonLd, toSocialMediaPostingJsonLd } from "@/lib/schema-org";

const nodes = [
  toPersonJsonLd(sampleViewer, { counts: sampleCounts.viewer }),
  toSocialMediaPostingJsonLd(samplePost),
];

export function Preview() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-3 text-left">
      {nodes.map((node) => (
        <pre
          key={String(node["@id"])}
          className="m-0 max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs"
        >
          {JSON.stringify(node, null, 2)}
        </pre>
      ))}
    </div>
  );
}
```

## Source

### lib/schema-org.ts

```ts
/**
 * Maps ActivityPub / ActivityStreams 2.0 documents to Schema.org JSON-LD.
 *
 * ActivityPub gives you federation; Schema.org gives you rich results and
 * machine-readable social graphs. Both vocabularies are JSON-LD, so the same
 * source object can be projected into either shape.
 *
 * @see https://schema.org/SocialMediaPosting
 * @see https://schema.org/ProfilePage
 */

import {
  getActorAcctUri,
  getActorDisplayName,
  getActorHandle,
  getCollectionCount,
  getCollectionItems,
  getObjectId,
  getTags,
  resolveActor,
  toPlainText,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
  type ActivityPubDocument,
  type ActivityPubObject,
  type ActivityType,
} from "@/lib/activitypub";

const SCHEMA_ORG_CONTEXT = "https://schema.org";

type JsonLdNode = {
  "@context"?: string;
  "@type": string | string[];
  [key: string]: unknown;
};

type SocialInteractionCounts = {
  likes?: number;
  shares?: number;
  replies?: number;
  followers?: number;
  following?: number;
  posts?: number;
  views?: number;
};

type JsonLdOptions = {
  /** Emit `@context`. Disable for nodes nested inside another JSON-LD graph. */
  withContext?: boolean;
};

/** ActivityStreams activity types projected onto Schema.org actions. */
const interactionActionTypes: Partial<Record<ActivityType, string>> = {
  Like: "LikeAction",
  EmojiReact: "LikeAction",
  Announce: "ShareAction",
  Create: "CommentAction",
  Follow: "FollowAction",
  Join: "JoinAction",
};

/** Schema.org type for each ActivityStreams object type. */
const postingTypes: Record<string, string> = {
  Note: "SocialMediaPosting",
  Article: "BlogPosting",
  Page: "WebPage",
  Image: "SocialMediaPosting",
  Video: "SocialMediaPosting",
  Audio: "SocialMediaPosting",
  Question: "SocialMediaPosting",
  Event: "Event",
};

function withContext(node: JsonLdNode, options: JsonLdOptions): JsonLdNode {
  if (options.withContext === false) {
    return node;
  }

return { "@context": SCHEMA_ORG_CONTEXT, ...node };
}

/** Drops `undefined`, `null`, and empty arrays so output stays compact. */
function compact(node: JsonLdNode): JsonLdNode {
  const result: JsonLdNode = { "@type": node["@type"] };

for (const [key, value] of Object.entries(node)) {
    if (value === undefined || value === null) {
      continue;
    }

if (Array.isArray(value) && value.length === 0) {
      continue;
    }

result[key] = value;
  }

return result;
}

function toImageObjectJsonLd(
  document: ActivityPubDocument,
  options: JsonLdOptions = {},
): JsonLdNode {
  const type =
    document.type === "Video"
      ? "VideoObject"
      : document.type === "Audio"
        ? "AudioObject"
        : document.type === "Image"
          ? "ImageObject"
          : "MediaObject";

return withContext(
    compact({
      "@type": type,
      contentUrl: document.url,
      url: document.url,
      caption: document.name ?? undefined,
      /** Alt text doubles as the accessibility description. */
      description: document.name ?? undefined,
      encodingFormat: document.mediaType,
      width: document.width,
      height: document.height,
      duration: document.duration,
    }),
    options,
  );
}

function toInteractionCounterJsonLd(
  interactionType: string,
  userInteractionCount: number,
): JsonLdNode {
  return {
    "@type": "InteractionCounter",
    interactionType: { "@type": interactionType },
    userInteractionCount,
  };
}

/** Builds the `interactionStatistic` array from ActivityPub counts. */
function toInteractionStatisticJsonLd(counts: SocialInteractionCounts): JsonLdNode[] {
  const mapping: readonly [keyof SocialInteractionCounts, string][] = [
    ["likes", "LikeAction"],
    ["shares", "ShareAction"],
    ["replies", "CommentAction"],
    ["followers", "FollowAction"],
    ["following", "SubscribeAction"],
    ["posts", "WriteAction"],
    ["views", "ViewAction"],
  ];

return mapping.flatMap(([key, interactionType]) => {
    const value = counts[key];

return typeof value === "number" ? [toInteractionCounterJsonLd(interactionType, value)] : [];
  });
}

/** Maps an ActivityStreams activity type to its Schema.org action type. */
function toInteractionActionType(type: ActivityType): string | undefined {
  return interactionActionTypes[type];
}

/**
 * Actor → `Person` (or `Organization`, matching the actor type).
 *
 * The WebFinger `acct:` URI is emitted as `identifier` so the Schema.org node
 * stays joinable with the fediverse identity.
 */
function toPersonJsonLd(
  actor: ActivityPubActor,
  options: JsonLdOptions & { counts?: SocialInteractionCounts } = {},
): JsonLdNode {
  const isOrganization = actor.type === "Organization" || actor.type === "Group";
  const links = (actor.attachment ?? [])
    .map((field) => field.value)
    .flatMap((value) => Array.from(value.matchAll(/https?:\/\/[^\s"'<>]+/gu), (match) => match[0]));
  const counts = options.counts ?? {};

return withContext(
    compact({
      "@type": isOrganization ? "Organization" : "Person",
      "@id": actor.id,
      name: getActorDisplayName(actor),
      alternateName: getActorHandle(actor),
      identifier: getActorAcctUri(actor),
      description: toPlainText(actor.summary) || undefined,
      url: actor.url ?? actor.id,
      image: actor.icon ? toImageObjectJsonLd(actor.icon, { withContext: false }) : undefined,
      sameAs: [...new Set(links)],
      interactionStatistic: toInteractionStatisticJsonLd(counts),
      additionalProperty: (actor.attachment ?? []).map((field) =>
        compact({
          "@type": "PropertyValue",
          name: field.name,
          value: toPlainText(field.value),
        }),
      ),
    }),
    options,
  );
}

function toAuthorJsonLd(object: ActivityPubObject): JsonLdNode | { "@id": string } | undefined {
  const actor = resolveActor(object.attributedTo);

if (actor) {
    return toPersonJsonLd(actor, { withContext: false });
  }

const id = getObjectId(object.attributedTo);

return id ? { "@id": id } : undefined;
}

/**
 * Object → `SocialMediaPosting` (or `BlogPosting` for `Article`).
 *
 * `sharedContent` is populated when the object is a reply so consumers can walk
 * the conversation, and reply counts land in `commentCount`.
 */
function toSocialMediaPostingJsonLd(
  object: ActivityPubObject,
  options: JsonLdOptions & {
    counts?: SocialInteractionCounts;
    /** Include nested `Comment` nodes built from `replies`. */
    includeComments?: boolean;
  } = {},
): JsonLdNode {
  const text = toPlainText(object.content);
  const replyCount = object.replies ? getCollectionCount(object.replies) : options.counts?.replies;
  const counts: SocialInteractionCounts = {
    likes: object.likes ? getCollectionCount(object.likes) : options.counts?.likes,
    shares: object.shares ? getCollectionCount(object.shares) : options.counts?.shares,
    replies: replyCount,
    views: options.counts?.views,
  };
  const comments = options.includeComments
    ? getCollectionItems(object.replies).map((reply) =>
        toCommentJsonLd(reply, { withContext: false }),
      )
    : [];

return withContext(
    compact({
      "@type": postingTypes[object.type] ?? "SocialMediaPosting",
      "@id": object.id,
      url: object.url ?? object.id,
      headline: object.name ?? undefined,
      /** Content warnings map cleanly onto `abstract`. */
      abstract: object.sensitive ? object.summary : undefined,
      articleBody: text || undefined,
      text: text || undefined,
      datePublished: object.published,
      dateModified: object.updated,
      inLanguage: object.inLanguage ?? Object.keys(object.contentMap ?? {})[0],
      author: toAuthorJsonLd(object),
      image: (object.attachment ?? [])
        .filter((attachment) => attachment.type === "Image")
        .map((attachment) => toImageObjectJsonLd(attachment, { withContext: false })),
      video: (object.attachment ?? [])
        .filter((attachment) => attachment.type === "Video")
        .map((attachment) => toImageObjectJsonLd(attachment, { withContext: false })),
      keywords: getTags(object, "Hashtag").map((tag) => tag.name.replace(/^#/u, "")),
      mentions: getTags(object, "Mention").map((tag) =>
        compact({ "@type": "Person", name: tag.name, url: tag.href }),
      ),
      contentLocation: object.location
        ? compact({
            "@type": "Place",
            name: object.location.name,
            geo:
              object.location.latitude === undefined
                ? undefined
                : compact({
                    "@type": "GeoCoordinates",
                    latitude: object.location.latitude,
                    longitude: object.location.longitude,
                  }),
          })
        : undefined,
      commentCount: replyCount,
      comment: comments,
      sharedContent: object.inReplyTo
        ? { "@type": "SocialMediaPosting", "@id": object.inReplyTo }
        : undefined,
      interactionStatistic: toInteractionStatisticJsonLd(counts),
    }),
    options,
  );
}

/** Reply object → `Comment`, with `parentItem` wired to `inReplyTo`. */
function toCommentJsonLd(object: ActivityPubObject, options: JsonLdOptions = {}): JsonLdNode {
  const text = toPlainText(object.content);

return withContext(
    compact({
      "@type": "Comment",
      "@id": object.id,
      url: object.url ?? object.id,
      text: text || undefined,
      datePublished: object.published,
      dateModified: object.updated,
      author: toAuthorJsonLd(object),
      parentItem: object.inReplyTo ? { "@type": "Comment", "@id": object.inReplyTo } : undefined,
      commentCount: object.replies ? getCollectionCount(object.replies) : undefined,
      comment: getCollectionItems(object.replies).map((reply) =>
        toCommentJsonLd(reply, { withContext: false }),
      ),
      interactionStatistic: toInteractionStatisticJsonLd({
        likes: object.likes ? getCollectionCount(object.likes) : undefined,
        replies: object.replies ? getCollectionCount(object.replies) : undefined,
      }),
    }),
    options,
  );
}

/** Actor → `ProfilePage`, the page-level node for a profile route. */
function toProfilePageJsonLd(
  actor: ActivityPubActor,
  options: JsonLdOptions & {
    counts?: SocialInteractionCounts;
    /** Recent posts surfaced as `hasPart`. */
    posts?: readonly ActivityPubObject[];
  } = {},
): JsonLdNode {
  return withContext(
    compact({
      "@type": "ProfilePage",
      "@id": `${actor.url ?? actor.id}#profile-page`,
      url: actor.url ?? actor.id,
      name: getActorDisplayName(actor),
      dateCreated: actor.published,
      mainEntity: toPersonJsonLd(actor, { withContext: false, counts: options.counts }),
      hasPart: (options.posts ?? []).map((post) =>
        toSocialMediaPostingJsonLd(post, { withContext: false }),
      ),
    }),
    options,
  );
}

/** Timeline collection → `CollectionPage` wrapping an `ItemList` of postings. */
function toFeedJsonLd(
  collection: ActivityPubCollection<ActivityPubObject> | readonly ActivityPubObject[],
  options: JsonLdOptions & { name?: string; url?: string } = {},
): JsonLdNode {
  const items = getCollectionItems(collection);

return withContext(
    compact({
      "@type": "CollectionPage",
      "@id": options.url ? `${options.url}#feed` : undefined,
      url: options.url,
      name: options.name,
      mainEntity: compact({
        "@type": "ItemList",
        numberOfItems: getCollectionCount(collection),
        itemListOrder: "https://schema.org/ItemListOrderDescending",
        itemListElement: items.map((item, index) =>
          compact({
            "@type": "ListItem",
            position: index + 1,
            item: toSocialMediaPostingJsonLd(item, { withContext: false }),
          }),
        ),
      }),
    }),
    options,
  );
}

/** Actor list → `ItemList` of `Person` nodes, for follower or people grids. */
function toActorListJsonLd(
  actors: readonly ActivityPubActor[],
  options: JsonLdOptions & { name?: string } = {},
): JsonLdNode {
  return withContext(
    compact({
      "@type": "ItemList",
      name: options.name,
      numberOfItems: actors.length,
      itemListElement: actors.map((actor, index) => ({
        "@type": "ListItem",
        position: index + 1,
        item: toPersonJsonLd(actor, { withContext: false }),
      })),
    }),
    options,
  );
}

/** Activity → `Action`, useful for notification and audit feeds. */
function toActionJsonLd(activity: ActivityPubActivity, options: JsonLdOptions = {}): JsonLdNode {
  const actor = resolveActor(activity.actor);
  const objectId = getObjectId(activity.object as string | { id?: string });

return withContext(
    compact({
      "@type": toInteractionActionType(activity.type) ?? "Action",
      "@id": activity.id,
      startTime: activity.published,
      agent: actor ? toPersonJsonLd(actor, { withContext: false }) : undefined,
      object: objectId ? { "@id": objectId } : undefined,
      actionStatus: "https://schema.org/CompletedActionStatus",
    }),
    options,
  );
}

export {
  SCHEMA_ORG_CONTEXT,
  toActionJsonLd,
  toActorListJsonLd,
  toCommentJsonLd,
  toFeedJsonLd,
  toImageObjectJsonLd,
  toInteractionActionType,
  toInteractionCounterJsonLd,
  toInteractionStatisticJsonLd,
  toPersonJsonLd,
  toProfilePageJsonLd,
  toSocialMediaPostingJsonLd,
  type JsonLdNode,
  type JsonLdOptions,
  type SocialInteractionCounts,
};
```

## Usage

ActivityPub gets your content to other servers; [Schema.org](https://schema.org) gets it into search
results and AI answers. Both are JSON-LD, so the same source object projects into either shape
without a second source of truth.

Every function is pure, takes an ActivityPub document, and returns a plain JSON-LD node. `undefined`,
`null`, and empty arrays are dropped, so output stays small enough to inline.

| ActivityPub                | Schema.org                                     |
| -------------------------- | ---------------------------------------------- |
| `Person`                   | `Person`                                       |
| `Group`, `Organization`     | `Organization`                                  |
| `Note`                     | `SocialMediaPosting`                            |
| `Article`                  | `BlogPosting`                                   |
| reply `Note`               | `Comment` with `parentItem`                     |
| actor profile              | `ProfilePage` with `mainEntity`                 |
| `OrderedCollection`        | `CollectionPage` wrapping an `ItemList`         |
| `Like`, `Announce`, `Follow` | `LikeAction`, `ShareAction`, `FollowAction`    |

```tsx
import { JsonLd } from "@/components/json-ld";
import { toProfilePageJsonLd, toSocialMediaPostingJsonLd } from "@/lib/schema-org";

<JsonLd data={toSocialMediaPostingJsonLd(note, { includeComments: true })} />
<JsonLd data={toProfilePageJsonLd(actor, { counts: { followers: 3187 }, posts })} />
```

Counts become `interactionStatistic` entries with the right `InteractionCounter` action type, which
is what Google reads for social engagement signals:

```ts
toInteractionStatisticJsonLd({ likes: 214, shares: 38, replies: 12, followers: 3187 });
```

Set `withContext: false` on any call to omit `@context` when nesting a node inside a larger graph.
`toPersonJsonLd` emits the WebFinger `acct:` URI as `identifier`, so a Schema.org consumer can join
the node back to the fediverse identity.

---

URL: https://ui.uptoolkit.com/utilities/social-sample-data.md

Sample ActivityPub actors, notes, and inbox activities for previewing social UI.

# Social Sample Data

Sample ActivityPub actors, notes, and inbox activities for previewing social UI.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/social-sample-data.json
```

[Registry JSON](https://ui.uptoolkit.com/r/social-sample-data.json)

## Preview

```tsx
import { getActorHandle } from "@/lib/activitypub";
import { sampleFollowers, sampleInbox, sampleTimeline, sampleViewer } from "@/lib/social-sample-data";

const summary = [
  ["Viewer", getActorHandle(sampleViewer)],
  ["Actors", String(sampleFollowers.length)],
  ["Timeline objects", String(sampleTimeline.length)],
  ["Inbox activities", String(sampleInbox.orderedItems?.length ?? 0)],
];

export function Preview() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-3 text-left">
      <dl className="m-0 grid gap-1 text-sm sm:grid-cols-2">
        {summary.map(([label, value]) => (
          <div key={label} className="flex justify-between gap-2 rounded-md border p-2">
            <dt className="text-muted-foreground">{label}</dt>
            <dd className="m-0 font-medium">{value}</dd>
          </div>
        ))}
      </dl>
      <pre className="m-0 max-h-64 overflow-auto rounded-md bg-muted p-3 text-xs">
        {JSON.stringify(sampleTimeline[0], null, 2)}
      </pre>
    </div>
  );
}
```

## Source

### lib/social-sample-data.ts

```ts
/**
 * Sample ActivityPub documents for previewing and testing social UI.
 *
 * Everything here is shaped exactly like what a real `outbox`, `inbox`, or
 * `followers` collection returns, so swapping in live data is a matter of
 * replacing these constants with your fetch.
 *
 * Timestamps are derived from {@link SAMPLE_NOW} rather than `Date.now()` so
 * server and client renders agree.
 */

import {
  ACTIVITY_STREAMS_CONTEXT,
  PUBLIC_AUDIENCE,
  type ActivityPubActivity,
  type ActivityPubActor,
  type ActivityPubCollection,
  type ActivityPubObject,
} from "@/lib/activitypub";

/** Fixed clock for the fixtures. Pass it as the `now` prop of any component. */
const SAMPLE_NOW = new Date("2025-06-12T15:00:00.000Z");

function minutesAgo(minutes: number): string {
  return new Date(SAMPLE_NOW.getTime() - minutes * 60_000).toISOString();
}

return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: base,
    type: options.type ?? "Person",
    preferredUsername: options.username,
    name: options.name,
    summary: `<p>${options.summary}</p>`,
    url: base,
    icon: {
      type: "Image",
      mediaType: "image/svg+xml",
      url: `https://api.dicebear.com/9.x/thumbs/svg?seed=${options.avatarSeed ?? options.username}`,
      name: `${options.name} avatar`,
    },
    image: {
      type: "Image",
      mediaType: "image/svg+xml",
      url: `https://api.dicebear.com/9.x/shapes/svg?seed=${options.username}-cover`,
      name: `${options.name} cover image`,
    },
    inbox: `${base}/inbox`,
    outbox: `${base}/outbox`,
    followers: `${base}/followers`,
    following: `${base}/following`,
    published: options.published ?? "2021-03-08T09:00:00.000Z",
    ...(options.manuallyApprovesFollowers ? { manuallyApprovesFollowers: true } : {}),
    ...(options.fields ? { attachment: options.fields } : {}),
  };
}

const sampleViewer = buildActor({
  username: "ada",
  name: "Ada Okoye",
  summary: "Front-end engineer. Building small tools for large groups of people.",
  published: "2020-01-14T10:30:00.000Z",
  fields: [
    {
      type: "PropertyValue",
      name: "Website",
      value: "https://ada.example",
      verifiedAt: minutesAgo(2880),
    },
    { type: "PropertyValue", name: "Location", value: "Lagos, Nigeria" },
    { type: "PropertyValue", name: "Pronouns", value: "she/her" },
  ],
});

const sampleAuthor = buildActor({
  username: "mira",
  domain: "fediverse.example",
  name: "Mira Halvorsen",
  summary: "Cartographer. I make maps of things that are hard to see.",
  published: "2019-07-21T12:00:00.000Z",
  fields: [
    {
      type: "PropertyValue",
      name: "Atlas",
      value: "https://maps.example/mira",
      verifiedAt: minutesAgo(10_080),
    },
    { type: "PropertyValue", name: "Location", value: "Bergen, Norway" },
  ],
});

const sampleFollowers: readonly ActivityPubActor[] = [
  sampleAuthor,
  buildActor({
    username: "tobi",
    name: "Tobi Ferrand",
    summary: "Sound designer. Field recordings from very cold places.",
  }),
  buildActor({
    username: "juno",
    domain: "hachyderm.example",
    name: "Juno Park",
    summary: "Type designer, letterform historian, reluctant poster.",
    manuallyApprovesFollowers: true,
  }),
  buildActor({
    username: "rk",
    name: "Rahel Kebede",
    summary: "Infrastructure. I keep the boring parts running.",
  }),
  buildActor({
    username: "atlas-collective",
    domain: "coop.example",
    name: "Atlas Collective",
    summary: "A worker-owned studio for open mapping tools.",
    type: "Organization",
  }),
  buildActor({
    username: "wren",
    name: "Wren Castellanos",
    summary: "Botanist. Mostly mosses.",
  }),
];

const sampleSuggestions: readonly ActivityPubActor[] = [
  buildActor({
    username: "kestrel",
    domain: "birds.example",
    name: "Kestrel Adeyemi",
    summary: "Ornithologist. Posting hawks until further notice.",
  }),
  buildActor({
    username: "lumen",
    domain: "photo.example",
    name: "Lumen Studio",
    summary: "Analogue film lab and community darkroom.",
    type: "Organization",
  }),
  buildActor({
    username: "sable",
    name: "Sable Nwachukwu",
    summary: "Archivist. Digitising 40 years of community radio.",
    manuallyApprovesFollowers: true,
  }),
];

return {
    id,
    type: options.type ?? "Note",
    attributedTo: options.author,
    content: options.content,
    published: minutesAgo(options.minutesAgo),
    to: [PUBLIC_AUDIENCE],
    cc: [options.author.followers ?? `${options.author.id}/followers`],
    url: id,
    inLanguage: "en",
    ...(options.name ? { name: options.name } : {}),
    ...(options.summary ? { summary: options.summary } : {}),
    ...(options.sensitive ? { sensitive: true } : {}),
    ...(options.inReplyTo ? { inReplyTo: options.inReplyTo } : {}),
    ...(options.attachment ? { attachment: options.attachment } : {}),
    ...(options.tag ? { tag: options.tag } : {}),
    ...(options.location ? { location: options.location } : {}),
    likes: {
      type: "Collection",
      id: `${id}/likes`,
      totalItems: options.likes ?? 0,
    },
    shares: {
      type: "Collection",
      id: `${id}/shares`,
      totalItems: options.shares ?? 0,
    },
    replies: {
      type: "Collection",
      id: `${id}/replies`,
      totalItems: options.replies?.length ?? 0,
      items: options.replies ?? [],
    },
  };
}

const mapPost = buildNote({
  author: sampleAuthor,
  slug: "coastline-drift",
  minutesAgo: 34,
  content:
    "<p>Spent the week redrawing a 1:25000 coastline by hand. The shoreline has moved 40 metres inland since the 1984 survey.</p><p>Every map is a snapshot of a place that has already changed. #cartography #openstreetmap</p>",
  tag: [
    { type: "Hashtag", name: "#cartography", href: "https://fediverse.example/tags/cartography" },
    {
      type: "Hashtag",
      name: "#openstreetmap",
      href: "https://fediverse.example/tags/openstreetmap",
    },
  ],
  attachment: [
    {
      type: "Image",
      url: "https://api.dicebear.com/9.x/shapes/svg?seed=coastline",
      name: "Hand-drawn coastline contour map with annotated survey markers",
      width: 1200,
      height: 800,
    },
    {
      type: "Image",
      url: "https://api.dicebear.com/9.x/shapes/svg?seed=survey",
      name: "Comparison overlay of the 1984 and current shoreline",
      width: 1200,
      height: 800,
    },
  ],
  location: { type: "Place", name: "Bergen, Norway", latitude: 60.39, longitude: 5.32 },
  likes: 214,
  shares: 38,
  replies: [
    buildNote({
      author: sampleViewer,
      slug: "coastline-drift-reply-1",
      minutesAgo: 26,
      content:
        "<p>Is the 1984 survey digitised anywhere? I would love to run the two through a diff.</p>",
      inReplyTo: "https://fediverse.example/users/mira/posts/coastline-drift",
      likes: 12,
    }),
    buildNote({
      author: sampleFollowers[1],
      slug: "coastline-drift-reply-2",
      minutesAgo: 21,
      content: "<p>The hand-drawn linework is beautiful. Are you inking these on vellum?</p>",
      inReplyTo: "https://fediverse.example/users/mira/posts/coastline-drift",
      likes: 5,
    }),
  ],
});

/** A reply nested under the first reply, to exercise thread depth. */
const nestedReply = buildNote({
  author: sampleAuthor,
  slug: "coastline-drift-reply-1-1",
  minutesAgo: 18,
  content:
    "<p>It is, but only as scanned TIFFs. I will put the georeferenced version up tonight.</p>",
  inReplyTo: `${sampleViewer.id}/posts/coastline-drift-reply-1`,
  likes: 9,
});

const sampleReplies: readonly ActivityPubObject[] = [
  ...(mapPost.replies?.items ?? []),
  nestedReply,
];

const samplePost = mapPost;

const articlePost = buildNote({
  author: sampleFollowers[4],
  slug: "mapping-tools-report",
  type: "Article",
  minutesAgo: 190,
  name: "What we learned running a mapping co-op for five years",
  content:
    "<p>Five years in, the hardest part was never the software. It was agreeing on what counts as done.</p><p>Full write-up on our site, including the governance docs we wish we had started with.</p>",
  tag: [{ type: "Hashtag", name: "#cooperatives" }],
  likes: 96,
  shares: 51,
});

const sensitivePost = buildNote({
  author: sampleFollowers[2],
  slug: "typeface-rant",
  minutesAgo: 420,
  summary: "Long typography rant, mild swearing",
  sensitive: true,
  content:
    "<p>The default line-height in almost every design tool is wrong for text over 24px and I am tired of pretending otherwise.</p>",
  likes: 63,
  shares: 7,
});

const mentionPost = buildNote({
  author: sampleFollowers[1],
  slug: "cold-recordings",
  minutesAgo: 55,
  content:
    "<p>New set of glacier recordings up. Thanks @mira@fediverse.example for the coordinates. #fieldrecording</p>",
  tag: [
    { type: "Mention", name: "@mira@fediverse.example", href: sampleAuthor.id },
    { type: "Hashtag", name: "#fieldrecording" },
  ],
  attachment: [
    {
      type: "Audio",
      url: "https://audio.example/glacier.ogg",
      name: "Twelve minute glacier field recording",
      mediaType: "audio/ogg",
      duration: "PT12M4S",
    },
  ],
  likes: 41,
  shares: 12,
});

const sampleTimeline: readonly ActivityPubObject[] = [
  samplePost,
  mentionPost,
  articlePost,
  sensitivePost,
];

function buildCreateActivity(object: ActivityPubObject): ActivityPubActivity<ActivityPubObject> {
  return {
    "@context": ACTIVITY_STREAMS_CONTEXT,
    id: `${object.id}/activity`,
    type: "Create",
    actor: object.attributedTo,
    object,
    published: object.published,
    to: object.to,
    cc: object.cc,
  };
}

/** An `Announce` wrapper, so the feed can show a boosted post. */
const sampleAnnounce: ActivityPubActivity<ActivityPubObject> = {
  "@context": ACTIVITY_STREAMS_CONTEXT,
  id: `${sampleFollowers[3].id}/activities/announce/1`,
  type: "Announce",
  actor: sampleFollowers[3],
  object: articlePost,
  published: minutesAgo(12),
  to: [PUBLIC_AUDIENCE],
};

/** Shaped like a real `outbox` response, newest first. */
const sampleFeed: ActivityPubCollection<ActivityPubActivity<ActivityPubObject>> = {
  "@context": ACTIVITY_STREAMS_CONTEXT,
  id: "https://social.example/users/ada/inbox?page=1",
  type: "OrderedCollection",
  totalItems: 128,
  orderedItems: [
    buildCreateActivity(samplePost),
    sampleAnnounce,
    buildCreateActivity(mentionPost),
    buildCreateActivity(sensitivePost),
  ],
  next: "https://social.example/users/ada/inbox?page=2",
};

/** Shaped like an `inbox` page for the notifications UI. */
const sampleInbox: ActivityPubCollection<ActivityPubActivity> = {
  "@context": ACTIVITY_STREAMS_CONTEXT,
  id: "https://social.example/users/ada/notifications?page=1",
  type: "OrderedCollection",
  totalItems: 24,
  orderedItems: [
    {
      id: `${sampleAuthor.id}/activities/like/9821`,
      type: "Like",
      actor: sampleAuthor,
      object: `${sampleViewer.id}/posts/coastline-drift-reply-1`,
      published: minutesAgo(4),
    },
    {
      id: `${sampleFollowers[1].id}/activities/emojireact/771`,
      type: "EmojiReact",
      actor: sampleFollowers[1],
      content: "\u{1F602}",
      object: `${sampleViewer.id}/posts/coastline-drift-reply-1`,
      published: minutesAgo(9),
    },
    {
      id: `${sampleFollowers[3].id}/activities/announce/1`,
      type: "Announce",
      actor: sampleFollowers[3],
      object: articlePost,
      published: minutesAgo(12),
    },
    {
      id: `${sampleSuggestions[0].id}/activities/follow/44`,
      type: "Follow",
      actor: sampleSuggestions[0],
      object: sampleViewer.id,
      published: minutesAgo(48),
    },
    {
      id: `${sampleAuthor.id}/posts/coastline-drift-reply-1-1/activity`,
      type: "Create",
      actor: sampleAuthor,
      object: nestedReply,
      published: nestedReply.published,
    },
    {
      id: `${sampleFollowers[2].id}/activities/follow/12`,
      type: "Follow",
      actor: sampleFollowers[2],
      object: sampleViewer.id,
      published: minutesAgo(1500),
    },
  ],
};

const sampleCounts = {
  viewer: { posts: 412, followers: 3187, following: 291 },
  author: { posts: 1204, followers: 18_940, following: 342 },
} as const;

export {
  SAMPLE_NOW,
  articlePost,
  buildCreateActivity,
  mentionPost,
  nestedReply,
  sampleAnnounce,
  sampleAuthor,
  sampleCounts,
  sampleFeed,
  sampleFollowers,
  sampleInbox,
  samplePost,
  sampleReplies,
  sampleSuggestions,
  sampleTimeline,
  sampleViewer,
  sensitivePost,
};
```

## Usage

Fixtures shaped exactly like real ActivityPub responses, so the blocks and pages in this registry
render standalone before you have a server to talk to. The social blocks default their data props to
these values; swap them for your fetch and delete the file.

```ts
import {
  SAMPLE_NOW,
  sampleFeed, // OrderedCollection of Create and Announce activities
  sampleInbox, // OrderedCollection of Like, EmojiReact, Announce, Follow, Create
  sampleFollowers, // Actor[]
  sampleSuggestions, // Actor[]
  sampleTimeline, // Object[]
  samplePost, // Note with attachments, tags, location, and replies
  sampleReplies, // Object[], including one nested reply
  sampleViewer, // the signed-in Actor
  sampleAuthor, // a remote Actor on another domain
  sampleCounts,
} from "@/lib/social-sample-data";
```

Timestamps derive from the fixed `SAMPLE_NOW` clock rather than `Date.now()`, so relative times are
stable between server and client renders. Pass it as the `now` prop of any component that formats a
timestamp.

The set deliberately covers the awkward cases: a remote actor on a second domain, an
`Organization` actor, an actor with `manuallyApprovesFollowers`, a sensitive post behind a content
warning, an `Article`, an `Announce` boost, a post with an audio attachment and a `Mention`, and
verified `rel="me"` profile fields.

---

URL: https://ui.uptoolkit.com/utilities/use-copy-to-clipboard.md

A small hook that copies text and tracks the latest copy result.

# useCopyToClipboard

A small hook that copies text and tracks the latest copy result.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/use-copy-to-clipboard.json
```

[Registry JSON](https://ui.uptoolkit.com/r/use-copy-to-clipboard.json)

## Preview

```tsx
import { Button } from "@/components/ui/button";

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";

export function Preview() {
  const copyState = useCopyToClipboard();
  const copyValue = "npx shadcn@latest add https://example.com/r/example-card.json";

return (
    <div className="flex flex-col items-center gap-3 text-center">
      <Button onClick={() => void copyState.copy(copyValue)}>Copy example command</Button>
      <p className="text-sm text-muted-foreground">
        {copyState.status === "copied" ? "Copied to clipboard." : "Ready to copy."}
      </p>
    </div>
  );
}
```

## Source

### hooks/use-copy-to-clipboard.ts

```ts
"use client";

import * as React from "react";

type CopyState =
  | {
      status: "idle";
      value: null;
      error: null;
    }
  | {
      status: "copied";
      value: string;
      error: null;
    }
  | {
      status: "error";
      value: null;
      error: Error;
    };

function useCopyToClipboard() {
  const [state, setState] = React.useState<CopyState>({
    status: "idle",
    value: null,
    error: null,
  });

const copy = React.useCallback(async (value: string) => {
    try {
      await navigator.clipboard.writeText(value);
      setState({ status: "copied", value, error: null });
      return true;
    } catch (error) {
      const copyError = error instanceof Error ? error : new Error("Copy failed.");

setState({ status: "error", value: null, error: copyError });
      return false;
    }
  }, []);

const reset = React.useCallback(() => {
    setState({ status: "idle", value: null, error: null });
  }, []);

return { ...state, copy, reset };
}

export { useCopyToClipboard, type CopyState };
```

## Usage

Call `copy` with the text you want to place on the clipboard. The hook exposes the latest copy
status so your UI can respond after the operation completes.

```tsx
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";

export function CopyButton() {
  const copyState = useCopyToClipboard();

return (
    <button onClick={() => void copyState.copy("Copied from my app")}>
      {copyState.status === "copied" ? "Copied" : "Copy"}
    </button>
  );
}
```